html - 如何仅向div的背景图像添加模糊效果？

Question

This question already has answers here:

How to apply a CSS filter to a background image
                                
                                    （15个答案）
                                
                        
                                23天前关闭。
            
                    
这是我的代码：

.header {
  width: 1200px;
  height: 350px;
  background-image: url("https://picsum.photos/1200/350");
  position: relative;
/*   filter: blur(5px); */
}

.content {
  width: 600px;
  height: 150px;
  background-color: red;
  position: absolute;
  bottom: 0;
  margin: 20px;
  display: flex;
}

.info {
  margin-left: 20px;
}

.otherImage {
  background-image: url("https://picsum.photos/320");
  width: 320px;
  height: 320px;
  margin: 15px;
  position: absolute;
  right: 0;
}

<div class="header">
  <div class="content">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      <h1>Name goes here</h1>
      <p>Description goes here</p>
    </div>
  </div>
  <div class="otherImage">
  </div>
</div>

如果我取消注释模糊效果线，它将使div的所有内容模糊。相反，我想要的是仅模糊 header div的背景图像，并保持所有其他内容不变。

最佳答案

您可以改为让.header::before按住background：

.header {
  width: 1200px;
  height: 350px;
  position: relative;
}
.header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-image: url("https://picsum.photos/1200/350");
  filter: blur(5px); 
}

.content {
  width: 600px;
  height: 150px;
  background-color: red;
  position: absolute;
  bottom: 0;
  margin: 20px;
  display: flex;
}

.info {
  margin-left: 20px;
}

.otherImage {
  background-image: url("https://picsum.photos/320");
  width: 320px;
  height: 320px;
  margin: 15px;
  position: absolute;
  right: 0;
}

<div class="header">
  <div class="content">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      <h1>Name goes here</h1>
      <p>Description goes here</p>
    </div>
  </div>
  <div class="otherImage">
  </div>
</div>

关于html - 如何仅向div的背景图像添加模糊效果？ ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59443297/

上一篇：html - 使用 HTML <div> 标记时，为属性指定值而不是属性名称的结果是什么？见说明中的例子

下一篇：html - grid css 两个div的高度不相等

Answer 1

您可以改为让.header::before按住background：

.header {
  width: 1200px;
  height: 350px;
  position: relative;
}
.header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-image: url("https://picsum.photos/1200/350");
  filter: blur(5px); 
}

.content {
  width: 600px;
  height: 150px;
  background-color: red;
  position: absolute;
  bottom: 0;
  margin: 20px;
  display: flex;
}

.info {
  margin-left: 20px;
}

.otherImage {
  background-image: url("https://picsum.photos/320");
  width: 320px;
  height: 320px;
  margin: 15px;
  position: absolute;
  right: 0;
}

<div class="header">
  <div class="content">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      <h1>Name goes here</h1>
      <p>Description goes here</p>
    </div>
  </div>
  <div class="otherImage">
  </div>
</div>