2020年4月4日，全国沉痛悼念新冠肺炎罹难者

  今天是清明节，2020年，我们经历了新冠肺炎的洗礼。从1月底到全国疫情状况的形式控制住，人们得以复工复业，这赖于在政府和党的领导下，全国人民上下一心，众志成城。更有无数医护人员逆行而上。抱着“苟利国家生死以，岂因祸福避趋之”的信念为中国抗疫，武汉抗疫奉献了很多很多，甚至是生命。在今年清明之际，国务院下令，为了悼念在新冠肺炎疫情中罹难的同胞，纪念在新冠肺炎抗疫中牺牲的一线医护人员烈士们，今天10年，全国默哀、悼念。

  在此之际，作为中国的企业，比如腾讯旗下所有游戏停运一天。百度，京东，淘宝等网站全部换成灰色色调以示悼念之意。

  我们作为开发人员，在沉痛悼念罹难的同胞们，和纪念牺牲的烈士们之外，我们也会关注如何快速的将自己的网站变成灰色色调，我们就来看一下各大网站是如何实现的。

各大网站如何实现网站的灰色色调，以示悼念之情

    1、百度

我们看到，百度的网站是灰色色调，但是审查其中的图片元素，还是原来的图片

再看他是如何实现的

其中实现的方式就是使用

filter:grayscale(100%)

通过H5的灰度滤镜，就可以快速了实现了网站转变成灰色色调。

顶部的“百度一下”按钮是在其祖辈元素上通过filter滤镜转变成灰色色调的。

2、京东

京东网站的灰色色调，也是采用了filter滤镜的方式，但是实现方式更简单

可以看到，京东是直接在html元素添加了filter滤镜的样式进行灰色色调转换

-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

不过京东网站对浏览器的兼容性成都做的更好，下面那个filter是IE浏览器的兼容，IE8-浏览器也能达到灰色色调的转换。

其他的，淘宝采用的是和京东完全一样的形式实现的。

但是他们的IE兼容形式在IE上实际是实现不了灰色色调效果的

可以看到IE的滤镜样式是有的，但并没有转换成灰色色调。在IE上测试IE7-IE11都实现不了对应的效果。

不过就目前前端的发展，IE浏览器已经推出市场。使用filter滤镜就可以达到相应的效果。

结语

最后，让我们沉痛悼念罹难的同胞，让我们哀悼牺牲的医护烈士们。没有什么岁月静好，只是有人为我们负重前行。此次的疫情抗战，我们中国展现出了大国风范，全国的团结。身为中国人，为祖国的崛起，为祖国的强大感到无比的骄傲。