今天是 2020 年 4 月 4 日,星期六,清明節(jié)。
我們的國家經(jīng)歷了非常慘痛的時刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保衛(wèi)人民的安危遇難,今天全國下降半旗,北京時間 10 點全國默哀三分鐘,來致敬英雄們。同時今天一切公共娛樂活動也都會停止,包括直播、綜藝、影視、游戲等等。
我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼,向所有在抗戰(zhàn)在疫情前線的工作和醫(yī)護人員致敬。我們每一個人的平安面前,都是英雄的人墻。
網(wǎng)站變灰
今天大家可以看到很多很多網(wǎng)站包括主頁和內(nèi)容也都已經(jīng)變成了灰色,比如百度、B 站、愛奇藝、CSDN 等等。
大家可以看到全站的內(nèi)容都變成灰色了,包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢?
有人會以為所有的內(nèi)容都統(tǒng)一換了一個 CSS 樣式,圖片也全換成灰色的了,按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個成本也太高了,而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。
其實,解決方案很簡單,只需要幾行代碼就能搞定了。
實現(xiàn)
我們選擇一個網(wǎng)站,比如 B 站吧,打開瀏覽器開發(fā)者工具。
審查一下網(wǎng)頁的源代碼,我們可以發(fā)現(xiàn)在 html 的這個地方多了一個疑似的 class,叫做 gray,gray 中文即灰色。
變灰效果
可以看到,我們只要將下面這行 CSS 樣式,加入到頁面指定節(jié)點,即可實現(xiàn)網(wǎng)頁變灰的效果。代碼如下:
為方便站點哀悼,特提供css濾鏡代碼,以表哀悼。以下為全站CSS代碼:
html {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
使用方法:這段代碼可以變網(wǎng)頁為黑白,將代碼加到CSS最頂端就可以實現(xiàn)素裝。Wordpress用戶,可以在外觀-自定義-額外CSS中添加該代碼。