时间戳

首页 > 解决方案 > CSS - 将背景过滤器应用于表单字段

html - CSS - 将背景过滤器应用于表单字段

问题描述

我正在使用引导程序。我需要对此输入字段应用背景过滤器，以使背景图像显得模糊。

.input-group {
  background-image: url("https://images.unsplash.com/photo-1579492450119-80542d516179?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=400&q=60");
  color: black;
  backdrop-filter: blur(10px); /* What am I doing wrong ?? */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.form-control {
  background-color: transparent;
  border-radius: 7px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.input-group-prepend {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div className="input-group" >
   <div className="input-group-prepend">
       <i className='far fa-search'></i>
   </div>
   <input type="text" className="form-control" placeholder="Search" />
</div>

据我说，这里的一切都是准确的，但它仍然没有应用过滤器。

有人可以帮忙吗？谢谢

标签： htmlcss

解决方案

过滤器通过混合背景来工作，背景设置在.input-group. 这意味着您需要将背景过滤器应用于输入 ( .form-control) 而不是父节点 ( .input-group)。

.input-group {
    background-image: url("https://images.unsplash.com/photo-1579492450119-80542d516179?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=400&q=60");
    color: black;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px;
}
    
.form-control {
  background-color: transparent;
  border-radius: 7px;
  padding-top: 25px;
  padding-bottom: 25px;
  backdrop-filter: blur(10px); /* <-------- Apply filter here */
}

我添加了一些填充.input-group来强调效果。

推荐阅读