如果身体有灰度滤镜，有没有办法让图像具有原始颜色？ [复制]答案

【问题标题】：Is there a way to have images with original color if body has a filter of greyscale? [duplicate]如果身体有灰度滤镜，有没有办法让图像具有原始颜色？ [复制]
【发布时间】：2019-08-30 14:59:27
【问题描述】：

我正在使用以下代码以灰度显示正文

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

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

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

我也在使用下面这段代码

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

但它不起作用。

请帮忙。

谢谢

【问题讨论】：

你检查过这个了吗？ stackoverflow.com/questions/26087286/…

标签： javascript css

【解决方案1】：

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

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

解决方法是只对所有需要灰度的元素应用灰度，但我想这需要提前计划并重新排列 DOM。

另一种解决方法是屏蔽灰度，但这需要 SVG 过滤器并且更复杂。

【讨论】：

【解决方案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>

【讨论】：

这仅适用于是标记的直接子代（非常罕见）jsfiddle.net/5qwLuade