W3CAPI 在线教程 | 菜鸟教程_LOGO
文档目录
文档目录
我的书签
 

CSS

网站全部变灰功能 兼容IE,火狐,谷歌chrome浏览器

在国家的一些特殊节日里,可以看到所有的网站都变成了灰色的,这是怎么实现的呢?其实就是利用了CSS里面的滤镜样式,它可以让所有网页里面所有的元素都表现为灰的颜色,当然也可以变为其他颜色

jesen
1
2020-04-04 12:25:20

网站页面全部变灰 兼容所有主流浏览器

滤镜在设计上是主要用来实现图像的各种特殊效果。在一些设计软件中,比如:PS,我们经常会使用到滤镜来做一些图片效果,在网页设计中,CSS也提供了滤镜功能的支持,通过使用CSS里面的滤镜样式就可以实现将页面所有元素变为灰色,如下代码:
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
因为滤镜的CSS样式是有浏览器兼容问题的,各种不同浏览器的实现方式各有不同,查阅相关的技术资料可以总结如下兼容代码:
*{filter:gray; color:gray;}

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(desaturate.svg#grayscale);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}
相关提问
敬请期待