一行代碼讓網頁變灰

　　今天是一個特殊的日子，今天不僅是清明節，今天更是咱們的國家經歷了嚴重的疫情，今天是哀悼英雄的日子，全國降半旗，北京時間10點全國默哀三分鐘，全國中止一切娛樂設施。

你們上網的時候能夠看到今天不少網站包括首頁和內容都變成了灰色，好比百度，騰訊視頻，B站，還有咱們的博客園

 

 

 

 

　　你們能夠看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候咱們可能會好奇這是怎麼作到的呢？有人會覺得全部的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想一想這個成本也過高了，並且萬一某個控件忘記加灰色樣式了豈不是太突兀了。其實，解決方案很簡單，只須要幾行代碼就能搞定了。

filter: grayscale(100%);

就是這一行代碼，咱們把這一行代碼放到給到網站根節點，也就是html標籤，就能夠實現整個網站變灰的效果，不一樣的網站爲了考慮兼容性，有不一樣的寫法，好比騰訊視頻的

html {
    filter: gray;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

好比B站的

html.gray {
    -webkit-filter: grayscale(.95);
}

這是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 樣式就能將整個網站變成灰色效果。那麼這裏咱們就來詳細瞭解一下這到底是一個什麼樣的 CSS 樣式。這個樣式名叫作 filter，搜下 MDN 的官方介紹，其連接爲：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。

官方介紹內容以下：

filter CSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡一般用於調整圖像，背景和邊框的渲染。
CSS 標準裏包含了一些已實現預約義效果的函數。你也能夠參考一個 SVG 濾鏡，經過一個 URL 連接到 SVG 濾鏡元素 (SVG filter element[1])。

其實就是一個濾鏡的意思。

其全部用法示例以下：

/* 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;

各個用法介紹你們能夠參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

好比這裏若是咱們可使用 blur 設置高斯模糊，用法以下：

filter: blur(radius)

　　給圖像設置高斯模糊。radius 一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一塊兒，因此值越大越模糊；若是沒有設定值，則默認是 0；這個參數可設置絕對像素值，但不接受百分比值。

 能夠達成這樣的效果：

 再說回剛纔的灰色圖像，這裏其實就是設置了 grayscale，其用法以下：

filter: grayscale(percent)

　　將圖像轉換爲灰度圖像。值定義轉換的比例。percent 值爲 100% 則徹底轉爲灰度圖像，值爲 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還能夠傳遞浮點數，效果是同樣的。

如：

filter: grayscale(1)
filter: grayscale(100%)

　　

均可以將節點轉化爲 100% 的灰度模式。因此一切到這裏就清楚了，若是咱們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，能夠參考下上面提到的 CSDN 的寫法

最後呢，看一下瀏覽器對 filter 這個樣式的兼容性怎樣，如圖所示：

 

 

我看了一下各個網站在IE下的顯示效果，都沒有兼容IE，不過有些網站只是加一個這個樣式，去掉以後就所有恢復原來的樣子了，而作的比較好的，好比騰訊視頻，網站中全部的圖片連接全都變成了灰色圖片，因此就算騰訊視頻在IE下也只是個別圖標有了顏色而已

 

 

最後在這裏向英雄致敬！

（文章引自https://mp.weixin.qq.com/s/2GNEky-NU4ywdADVOs3iiA）