时间戳

首页 > 解决方案 > CSS - 模糊背景img，但它也适用于它前面的img

css - CSS - 模糊背景img，但它也适用于它前面的img

问题描述

我将模糊滤镜应用于包装 div 的背景图像。由于某种原因，模糊过滤器也被应用于包装器 div 中的 img 元素。

#wrapper-5 {
  background: url("https://i.picsum.photos/id/1062/600/400.jpg") no-repeat;
  filter: blur(5px);
}
#img-5 {
  clip-path: circle(30%);
  filter: grayscale(80%);
}
<div id="wrapper-5">
      <img id="img-5" src="https://i.picsum.photos/id/1062/600/400.jpg" width="600" alt="doggie" />
</div>

标签： css

解决方案

这是意料之中的，您正在模糊父元素而不是背景，这将包括任何子元素。

改用伪元素并模糊它。

#wrapper-5 {
  position: relative;
}

#wrapper-5:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://i.picsum.photos/id/1062/600/400.jpg") no-repeat;
  filter: blur(5px);
}

#img-5 {
  clip-path: circle(30%);
  filter: grayscale(80%);
}
<div id="wrapper-5">
  <img id="img-5" src="https://i.picsum.photos/id/1062/600/400.jpg" width="600" alt="doggie" />
</div>

推荐阅读