是否有可能将整个页面转换为灰度，除了img？

Question

我试过但它不起作用：

body {
    -webkit-filter: grayscale(100%);
}
img {
    -webkit-filter: none !important;
}

Answer 1

过滤器以这种方式工作：首先它将渲染所有元素，并应用来自父级的过滤器。

因为您将grayscale设置为正文。它不会重新适用于您的img。

<强>解决方案：

不是申请身体，而是申请所有需要的div并留下img。

Answer 2

如其他答案中所述，将灰度应用于除图像之外的所有元素。

body *:not(img) {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
h1 {
  color: red;
}
img {
  float: left;
}
p {
  color: green;
}

<h1>Phil is Awesome</h1>
<img src="http://www.fillmurray.com/200/300" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, corrupti culpa suscipit, saepe voluptas eius.</p>