CSS - 模糊背景图像，但它也适用于它前面的 img [重复]答案

【问题标题】：CSS - Blur background img but it also applies to the img in front of it [duplicate]CSS - 模糊背景图像，但它也适用于它前面的 img [重复]
【发布时间】：2020-08-31 11:34:57
【问题描述】：

我将模糊滤镜应用于包装 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>

【问题讨论】：

你需要给子元素的z-index高于父元素，使其高于过滤效果

标签： css

【解决方案1】：

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

改用伪元素并模糊那个。

#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>

【讨论】：