请教 css 网站置灰，排除图片的问题？

Question

网站至灰一行css（不考虑兼容）：

html {  filter: grayscale(100%);} 

请问如何排除网站中的图片呢？我试过如下代码，似乎不起作用

html:not(img) {  filter: grayscale(100%);} 

也试过这样，也不起作用

html { filter: grayscale(100%);} 
img { filter: none; }

也试过这样，也不起作用

div,i,span,p,b {  filter: grayscale(100%);} 

请问我如何做到网站置灰，排除图片呢？

Answer 1

试试这个，可以将除图片外的所有元素都置灰

:not(:has(img)):not(img) {
    filter: grayscale(1);
}

Answer 2

没有用一行CSS简单来实现的方法。因为你的 filter: grayscale(100%) 是在 html 元素上面的，等于说是在页面视窗上遮罩了一层灰度的膜。

想要使用图片不去被去色的话，只能自己按照区块来设置，比如说 header 和 footer 一般都是没有图片元素的，可以直接添加灰度滤镜，其他的部分按照容器去添加。如果说里面会包含图片元素的就不添加，但是这样的话就需要花时间去找出来这些容器样式类，时间成本就很高。
或者直接用递归找到所有末级元素来添加灰度滤镜，但并不是所有的背景图、背景色都是设置在末级的，所以这样依旧会有漏网之鱼。

所以来说一般都是直接给 html 增加一个灰度滤镜，粗暴的解决掉所有的问题。不管你去看百度还是微博还是B站都是全灰，不管是不是媒体内容（图片、视频）都给设置为灰色了。
还是和 PM 商量一下吧，为什么要排除图片，尽量不做不必要的无用功，把时间留在需要的地方。

Answer 3

感觉这个有点像opacity，只要父元素opacity是0，子元素再怎么设置都会看不到

Answer 4

:not(:has(img,canvas)):not(img,canvas) {
    filter: grayscale(1);
}

Answer 5

最直接的方法就是在需要置灰的地方加上 filter: grayscale(100%)
或者试试

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

Answer 6

最好不要在非html元素设置filter: grayscale(100%)，设置之后 fixed 定位可能会失效。

Answer 7

错了，我再研究一下。。。