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

Question

我正在将模糊过滤器应用到包装器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>

​

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

​