為何一夜之間很多網(wǎng)站和APP都變成了灰色？

今天是2020年清明節(jié)，特殊的節(jié)日我們回顧過去中華民族經(jīng)歷的磨難，心情沉重的緬懷先祖。再加上抗擊新冠病毒犧牲的醫(yī)務(wù)工作者和四川火災(zāi)犧牲的消防人員讓我們舉國悲痛。我們用降半旗，默哀這樣的形式來致敬我們的英雄，同時(shí)停止一切娛樂活動(dòng)，并且今天幾乎所有的主流媒體以及網(wǎng)站都變成了下面的樣子。

灰色的度娘

灰色的CSDN

灰色的愛奇藝

灰色的B站

灰色的簡書

那么這些網(wǎng)站如何一夜之間做到全部變色的呢？

仔細(xì)研究其實(shí)不難發(fā)現(xiàn)一些東西，比如百度的

這里的qm不難猜測就是清明的意思，activity就是清明節(jié)要去啟用的意思。但是我并沒有在css檢查頁面元素的css中看到這個(gè)類具體的樣式，那么初步猜測應(yīng)該是在某個(gè)JS里面去判斷節(jié)日，然后換上對(duì)應(yīng)的類。這里由于百度的首頁JS比較多我沒有再去翻閱JS文件，具體如何實(shí)現(xiàn)還有待確認(rèn)。

B站的首頁

我們?cè)賮砜匆幌翨站。也是在HTML中有個(gè)gray的類，通過單詞本意感覺就是這個(gè)類的作用結(jié)果。而且在樣式中我找到了如下CSS樣式。

看到filter我們心里大概就已經(jīng)知道是怎么回事了，也就是給我們的頁面添加了一個(gè)濾鏡效果。

我們之前知道filter是設(shè)置透明度的，并且具有兼容問題，在IE中使用opacity實(shí)現(xiàn)兼容。那么什么又是濾鏡呢？

具體的我們?nèi)ゲ榭匆幌耭ilter屬性。

filter 語法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

哇哦：什么東西，這么一大堆，好嚇人。

咳咳咳，不要怕啊，學(xué)什么東西不要想著一下子就能學(xué)會(huì)，我們只要知道用什么學(xué)什么就行，這已經(jīng)很難了，不要總想著一口氣吃撐。比如我們今天就是要研究頁面怎么能變成灰色。而且B站已經(jīng)告訴我們使用的是什么。也就是grayscale，那就簡單多了。

也就是說我們可以通過filter:grayscale(百分比)實(shí)現(xiàn)灰度圖像。數(shù)值越大，灰度越大。

最后找一個(gè)圖片去做試驗(yàn)。原圖如下：

上頁面：

設(shè)置濾鏡：

OK，完全沒的問題，那么如果是具體的顏色會(huì)怎樣呢？

事實(shí)證明即使是普通的顏色設(shè)置也會(huì)被濾鏡修改為對(duì)應(yīng)的灰度。

好的，那么到現(xiàn)在為止我們已經(jīng)學(xué)會(huì)了如何實(shí)現(xiàn)簡單幾行代碼實(shí)現(xiàn)整個(gè)頁面的灰度變化，那么你是否覺得自己沒有吃飽呢，如果有請(qǐng)查看上面那一堆。看看自己能啃下多少。