网页变灰色css

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院（4月3日）发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

在4月4日这天，一些平台实施游戏停服、直播停播、页面变灰色调等等一系列举措表达对逝者的哀悼。

今天（4.5）闲来无事，打开电脑，看到原来不仅app变灰色，就连客户端、网页也都变成了灰色，某音乐客户端仅主页变成了灰色，而另一款则是全部页面（个人中心、评论页等）均变成了灰色调，网页版则都是全部页面灰色。

这就勾起了我的好奇，想看看是如何实现的，准备拿之前写的vue移动端demo试试看。把代码check下来（之前是在另一台电脑写的，上传到了我的代码库），运行报错，so，就有了下面的vue项目报错集合，觉得所有可能的报错都被我碰到了，截图记录下解决方案，给自己警示也给需要的人，传送门：vue项目报错集合：https://blog.csdn.net/pang787559613/article/details/105335423。

终于报错解决，运行成功，把sourcetree中所有改动丢弃，依旧完美启动，开始正题，实现页面变灰色。

在html中加入以下css可以使整个页面变灰色，Chrome、Safari、Firefox都有效，其余浏览器未测试。

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

测试：

没加这段css前：

加了之后：