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

昨天是 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

原文出處：https://www.cnblogs.com/babycomeon/p/12636731.html