今天是清明节,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滤镜就可以达到相应的效果。
最后,让我们沉痛悼念罹难的同胞,让我们哀悼牺牲的医护烈士们。没有什么岁月静好,只是有人为我们负重前行。此次的疫情抗战,我们中国展现出了大国风范,全国的团结。身为中国人,为祖国的崛起,为祖国的强大感到无比的骄傲。