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

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

灰色的度娘

灰色的CSDN

灰色的愛奇藝

灰色的B站

灰色的簡書

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

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

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

B站的首頁

我們再來看一下B站。也是在HTML中有個gray的類，通過單詞本意感覺就是這個類的作用結果。而且在樣式中我找到了如下CSS樣式。

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

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

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

filter 語法

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

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

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

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

最后找一個圖片去做試驗。原圖如下：

上頁面：

設置濾鏡：

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

事實證明即使是普通的顏色設置也會被濾鏡修改為對應的灰度。

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