CSS实现网页灰色调

前沿

每当国家重大灾难纪念日，如南京大屠杀纪念日、最近的4月4号的为抗议牺牲者哀悼等，网页都会设置为灰色调，实现网页灰色调非常简单，只需要CSS在HTML标签设置属性即可。

设置灰色调

html{
 	  filter: grayscale(100%); 
      /* -webkit-filter: grayscale(100%); */
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -webkit-filter: grayscale(1);
}

其中filter是一种滤镜。

如修改所有图片的颜色为黑白 (100% 灰度):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

可以设置兼容不同浏览器不同浏览器，如

Gecko内核　　  css前缀为"-moz-"　　 火狐浏览器
WebKit内核　　css前缀为"-webkit-"    Comodo Drangon(科摩多龙)，苹果，搜狗高速浏览器
Presto内核 　　 css前缀为"-o-"             Opera(欧朋),NDSBrowser
Trident内核　　css前缀为"-ms-"           IE，360极速浏览器，猎豹安全浏览器，傲游浏览器，百度浏览器，世界之窗浏览器，2345浏览器，腾讯TT，淘宝浏览器，采编读浏览器，搜狗高速浏览器，阿云浏览器，瑞星安全浏览器，Slim Browser，GreenBrowser、爱帆浏览器，115浏览器，155浏览器，114浏览器，N氧化碳浏览器，糖果浏览器，彩虹浏览器，瑞影浏览器，勇者无疆浏览器，闪游浏览器，蚂蚁浏览 器，飞腾浏览器，速达浏览器，佐罗浏览器，海豚浏览器（iPhone/iPad/Android），UC浏览器
Trident内核                     css前缀为"-khtml-"：  苹果浏览器之前的版本，后改为WebKit内核

最后希望疫情尽快结束。前线抗疫战士平平安安。