昨天網站都變灰了，你知道是怎麼做的么？

2020 年 4 月 5 日
筆記

昨天是 2020 年 4 月 4 日，清明節。

這個清明節，我想我們很多人在今後的很多年中都不會忘記，這一刻，我們參與了歷史，同時成為了歷史的見證者。

2020 年從過年到現在，我們的國家遭遇了非常慘痛的經歷，很多英雄在救助他人的路上倒下，更有很多烈士保衛人民的安危遇難，全國下降半棋，北京時間上午 10 點，全國拉響防空警報，默哀 3 分鐘，來致敬逆行的英雄。

同時，所有的公共娛樂活動也全部停止，包括直播、綜藝、影視、遊戲等等。

在昨天，如果你有打開過抖音 APP ，看到的幾乎全都是我們這次的抗疫英雄，我覺得，抖爸爸這次乾的漂亮，英雄們值得被這樣宣傳。

截至4月2日，全國共有60名公安民警和35名輔警犧牲在抗擊疫情和維護安全穩定第一線，用寶貴生命譜寫了一曲曲人民公安為人民的英雄讚歌。

截止4月3日，已有41位抗疫犧牲殉職醫生和護士，2020年我們已經痛失13名院士，沉痛悼念。願天堂再無病痛！

我也在這裡也向全國抗擊新冠肺炎疫情鬥爭犧牲的烈士和逝世的同胞表達深切的哀悼，向所有在抗戰在疫情前線的工作和醫護人員致敬。

網站變灰

昨天早晨一覺醒來，打開瀏覽器，整個互聯網都變灰了，一開始還以為自己色盲了，後來才反應過來，不禁為自己的智商感到擔憂。

不過在網上衝浪一圈，可以看到很多我們常用的網站都變成了灰色的：

可以看到，這些網站的全站內容都變成灰色的了，包括按鈕、圖片、文字等資訊。

不知道大家有沒有對他們是如何變灰的產生問號，反正我是產生了。

我第一個反應是重寫了 css 樣式，圖片做了替換。

先不說我上面這個想法好不好使哈，我上面想到的這個方案，肯定替換成本是相當高的，萬一哪裡沒寫對，再搞點幺蛾子出來，這個事情就有點玩大了。

所以帶著這個問題，我按下了鍵盤上神聖的 F12 去尋找答案。

果然，這個答案就簡單的躺在瀏覽器的調試窗口中。

打開某東的首頁，按下 F12 後，看到在 html 上面增加了一個樣式：

手動把這裡樣式取消掉，看到網頁恢復了正常的顏色，具體程式碼如下：

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

再去我最常逛的 CSDN 看一圈：

具體程式碼如下：

html {      -webkit-filter: grayscale(100%);      -moz-filter: grayscale(100%);      -ms-filter: grayscale(100%);      -o-filter: grayscale(100%);      filter: grayscale(100%);      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  }

可以看到，這兩個網站的這個這個 css 修飾的對象都是 html ，是作用全局的，而且在 CSDN 的程式碼要比某東的長很多，首先講一下，長不一定是好的，但是這個程式碼一看就要兼容性好很多。

帶有 webkit 前綴的意思是在 webkit 內核的瀏覽器中生效，比較常見的有 Chrome 、搜狗高速瀏覽器、 360極速版等等一大堆瀏覽器；而帶有 moz 前綴的意思是在 firefox 中生效；帶有 ms 前綴的含義是 IE （不得不說 CSDN 連 IE 都還在支援我也是驚了）；帶有前綴 o 的是指 Opera （歐朋）瀏覽器（這個在中國是真的沒什麼用戶，不過講真的還可以，我用過一段時間，後面是投向了 Chrome 的懷抱）。

原理

這裡其實就是直接在全部的 DOM 元素上增加了一個 filter ，百度上搜一下 filter ，可以找到一個 MDN 的官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter 。

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整影像，背景和邊框的渲染。

CSS標準里包含了一些已實現預定義效果的函數。你也可以參考一個SVG濾鏡，通過一個URL鏈接到SVG濾鏡元素(SVG filter element)。

簡單來講，其實就是在所有的元素前面加了一個濾鏡，跟我們平時看很多妹子拍完照片後加濾鏡是一個意思（希望我的女性讀者看到這裡不要打我）。

這裡官方也給出了一個小示例，如下：

怎麼樣，是不是看著很好玩的樣子。

官方還給出了使用示例：

/* URL to SVG filter */  filter: url("filters.svg#filter-id");    /* <filter-function> values */  filter: blur(5px);  filter: brightness(0.4);  filter: contrast(200%);  filter: drop-shadow(16px 16px 20px blue);  filter: grayscale(50%);  filter: hue-rotate(90deg);  filter: invert(75%);  filter: opacity(25%);  filter: saturate(30%);  filter: sepia(60%);    /* Multiple filters */  filter: contrast(175%) brightness(3%);    /* Global values */  filter: inherit;  filter: initial;  filter: unset;

各種用法的示例在官方文檔上已經給的很清楚了，有興趣的小夥伴可以自己去看下，想在線練習可以直接打開官方提供的 CodeOpen 或者 JSFiddle 鏈接，直接在線改改，非常的 easy 。

我們回到上面的問題，其實就已經很明顯了，直接給圖片設置 filter: grayscale(percent) 就好了。

並且我們還可以在參數中設置灰度的百分比，從 0% 到 100% ，隨便設置，當然如果不設置的化，默認是 0 ，就是沒有灰度。

最後再看下 filter 對瀏覽器的兼容性，同樣是由官方提供：

可以看到，出了對 PC 端的 IE 沒有做支援，基本上是都支援了，而且還對 mobile 端的 Firefox 和 PC 端的 Firefox 的 SVG 單獨做了加持，基本上可以放心的使用，不過從這裡也可以看到，前面 CSDN 對 IE 瀏覽器增加的前綴是沒啥用的，希望 CSDN 的前端同學看到了不要打我（手動逃跑）。

參考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter