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

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的高度不相等

html - 如何仅使用html和scss在元素前后分配不同的背景颜色？

HTML/CSS - 内联 block 显示和绝对定位

css - 填充强制 block 元素换行

javascript - 在 jQuery 中通过 width() 输出错误的 div 宽度

html5 Canvas : fix width/height with fillrect(. ..)？

javascript - 是否可以在浏览器中使用 javascript 对用户系统进行基准测试

jquery - 如何在拖放时调整图像的位置

css 选择 xml 值并打印

html - 如何将文字放在封面图片下方？