CSS

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

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

jesen

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);
}

作者文档

CSS

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

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

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

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