Question

我正在使用下面的代码以灰度显示主体

.body{
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
}

但是我希望图像具有原始颜色，所以我正在使用

img{
        -webkit-filter:none;
        filter:none; 
}

我也正在使用以下代码

img{
       -webkit-filter: grayscale(0%);
       filter: grayscale(0%);
}

但不起作用。

请帮助。

谢谢

Answer 1

您不能将过滤器应用于父元素，然后从该过滤器中排除子级。

如果将灰度应用于<body>，则无法从正文中的任何div删除灰度。

解决方法是仅将灰度应用于所有需要灰度的元素，但我认为这需要一些计划，并重新布置DOM。

另一种解决方法是掩盖灰度，但它需要SVG滤镜并且更加复杂。

Answer 2

您可以轻松更新第一个选择器，该选择器在body元素上设置过滤器以排除任何图像：

body :not(img) {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

p {
  color: red;
}

<img src="https://placekitten.com/200/287" />

<p>Hello</p>