w3h5

央视著名主持人李咏去世,其百度百科词条变灰是如何实现的?

李咏是央视著名主持人,他主持过的节目陪伴着无数人度过了美好的童年。

央视著名主持人李咏去世,其百度百科词条变灰是如何实现的? HTML笔记 第1张

但不幸的是,在10月29日上午9时许,李咏的妻子哈文在微博上发文称李咏去世的消息“在美国,经过17个月的抗癌治疗,2018年10月25日凌晨5点20分,永失我爱……”,一时间轰炸整个微博,明星大V以及网友们都为李咏默哀,也有不少网友纷纷表示:消息来得太突然,不敢相信!

央视著名主持人李咏去世,其百度百科词条变灰是如何实现的? HTML笔记 第2张

与此同时,百度百科的“李咏”词条界面也变成灰色。其实每当有明星或者名人去世,相应的百度词条也都会变灰,以示对死者的默哀。

央视著名主持人李咏去世,其百度百科词条变灰是如何实现的? HTML笔记 第3张

如何实现网站的全站变灰呢?这就涉及到前端方面的知识了。

百度在这里,为body标签添加了一个叫“memorial”的类名,为其设置了“filter: grayscale”属性,这样就能实现全站变灰了。代码如下:

body.memorial>* {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /*兼容Chrome*/
    -moz-filter: grayscale(100%); /*兼容FireFox*/
    -ms-filter: grayscale(100%); /*兼容IE*/
    -o-filter: grayscale(100%); /*兼容Oper*/
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*兼容IE*/
    -webkit-filter: grayscale(1); /*兼容Chrome*/
}


赞 (1)
分享到: +More |

评论 沙发

换个身份