今天大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色，比如百度、B 站、愛奇藝、CSDN 等等。
CSDN
愛奇藝
百度
大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎麼做到的呢？
有人會以爲所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。
其實，解決方案很簡單，只需要幾行代碼就能搞定了。
html.gray {
-webkit-filter: grayscale(.95);
}
果然是這個樣式在起作用，而且是全局的效果，因爲它是作用在了 html 這個節點之上的。
另外看看 CSDN，它也是用的這個 CSS 樣式，其內容爲：
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 樣式就能將整個網站變成灰色效果。
這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接爲：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。
官方介紹內容如下：
filter CSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。
CSS 標準裏包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。
其實就是一個濾鏡的意思。
官方有一個 Demo，可以看下效果，如圖所示。
Demo
比如這裏通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
其所有用法示例如下：
/* 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;
灰色圖像，這裏其實就是設置了 grayscale，其用法如下：
filter: grayscale(percent)
將圖像轉換爲灰度圖像。值定義轉換的比例。percent 值爲 100% 則完全轉爲灰度圖像，值爲 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數，效果是一樣的。
都可以將節點轉化爲 100% 的灰度模式。
filter: grayscale(1)
filter: grayscale(100%)
所以一切到這裏就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：
.gray {
-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);
}
這樣想要變灰的節點只需要加上 gray 這個 class 就好了，比如加到 html 節點上就可以全站變灰了。