嘿，我懂你遇到的困扰了——给body加了灰度滤镜后，不管给img设filter: none还是grayscale(0%)都完全没效果，对吧？这其实是因为CSS滤镜不是继承属性，但父元素的滤镜会把整个容器（包括所有子元素）当成一个整体处理。也就是说，body的灰度滤镜已经把整个页面内容都“染”成灰色了，子元素再怎么设置filter也没法抵消这个整体效果。

给你两个靠谱的解决方案：

方案一：给非图片元素单独加灰度滤镜 #

这个方法最直接，不给body加滤镜，而是把滤镜应用到body里除了img之外的所有元素：

body *:not(img) {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

这样img元素会完全跳过灰度滤镜，保留原始色彩。如果还有其他元素（比如视频、canvas）也想保留彩色，只需要把它们加到:not()选择器里就行，比如：

body *:not(img):not(video):not(canvas) {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

⚠️ 注意：如果你的图片是作为元素的background-image存在的（不是<img>标签），那这个元素还是会被加上灰度滤镜，背景图也会变灰。这种情况需要单独给该元素设置filter: none。

方案二：用伪元素实现全局灰度（更灵活） #

如果不想逐个排除元素，可以用body的伪元素来覆盖整个页面，通过混合模式实现灰度效果，这样图片可以不受影响：

body {
  position: relative;
  background-color: #fff; /* 设置你的页面默认背景色 */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  z-index: 0;
  mix-blend-mode: color; /* 让灰度滤镜只影响颜色，不影响透明度 */
  pointer-events: none; /* 避免伪元素干扰页面交互 */
}

/* 确保图片和需要保留色彩的元素在伪元素上方 */
img, video, canvas {
  position: relative;
  z-index: 1;
}

这个方法的好处是不需要修改太多选择器，只要把需要保留色彩的元素设置更高的z-index即可。

内容的提问来源于stack exchange，提问作者Tarun Jain