一段css让全站变灰

WEB前端 CSS样式 2020年4月13日

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定2020年4月4日（明天）举行全国性哀悼活动。很多平台都把网页设置为灰色，表示哀悼。如果立即从设计修图、按设计图代码修改，那工作量是灾难性的。能不能用一段代码解决呢？答案是：有的，CSS3的filter。下面雷雪松带你一起看一下如何只通过一段CSS让全站变灰。

[cc lang=”css” escaped ]html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}[/cc]

来源：一段css让全站变灰