4月4日時，很多網站包括主頁和內容（包括圖片、按鈕等）也都已經變成了灰色。當天我打開的csdn、人人視頻都全部變爲了灰色。
我當時第一想法是難道把這些圖片都換了一遍嗎？？？但是成本未免太高，且可能會有疏漏。今天在公衆號裏看到了一篇推文的詳細解釋，記錄一下。
一、實際的解決方法：（僅對於網站）
加一個全局的CSS樣式。加在最外層的html上。
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);
}
二、什麼是Filter — 濾鏡？
filter CSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。
- 通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
- 灰色圖像，這裏其實就是設置了 grayscale，其用法如下：
filter: grayscale(percent)
將圖像轉換爲灰度圖像。值定義轉換的比例。percent 值爲 100% 則完全轉爲灰度圖像，值爲 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數，效果是一樣的。
如：
filter: grayscale(1)
filter: grayscale(100%)
都可以將節點轉化爲 100% 的灰度模式。
所以一切到這裏就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以考慮如下寫法：
.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 節點上就可以全站變灰了。
三、各瀏覽器對filter的兼容性
除了 IE，其他的 PC、手機端的瀏覽器都支持了，Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持。
四、APP中是怎麼實現的？
摘自：公衆號下方的留言
- 有些資源是從Web接口獲得的，比如banner，縮略圖，小圖標等。如微博。
- 某些顏色或者樣式配置也是從接口獲得的，是可配置的。
- 一些APP內嵌的Web頁面，和網頁原理是一樣的。