请教css网站置灰,排除图片的问题?

网站至灰一行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%);} 

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

回复
阅读 1.7k
7 个回答

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

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

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

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

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏