2020年4月4日,全国沉痛悼念新冠肺炎罹难者,纪念在一线抗议牺牲得医护烈士。
2020-04-04 21:10

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

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

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

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

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

    1、百度

    image.pngimage.png

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

image.png

再看他是如何实现的

image.png

其中实现的方式就是使用

filter:grayscale(100%)

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

image.png

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



2、京东

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

image.png

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

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

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


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

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

image.png

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

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

结语

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

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(774)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1