昨天打開各個網(wǎng)站，發(fā)現(xiàn)網(wǎng)頁都變成灰色了。今年國家經(jīng)歷了非常慘痛的時刻，有很多烈士英雄保衛(wèi)人民的安危遇難，昨天全國下降半旗，北京時間 10 點(diǎn)全國默哀三分鐘，來致敬英雄們。為了深切哀悼在抗擊新冠肺炎斗爭中的犧牲烈士和逝世同胞，4月4日0點(diǎn)起，全國多家網(wǎng)站和移動端，比如百度、優(yōu)酷、愛奇藝、嗶哩嗶哩、抖音、快手、斗魚和CSDN等平臺給出公告稱：2020年4月4日全國性哀悼活動期間，停止今天一切公共娛樂活動。

隨便打開這些任何一個網(wǎng)站，全站的內(nèi)容都變成了灰色，包括按鈕、圖片等等。相信這時候從事程序開發(fā)的粉絲可能會好奇這是怎么做到的呢？
其實解決方案很簡單，只需要幾行代碼就能搞定了。從事前端開發(fā)的朋友會以為所有的內(nèi)容都統(tǒng)一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統(tǒng)一換成了灰色樣式。如下圖，有一個灰色樣式：[filter: grayscale(100%);]，也許就是這一個樣式控制著整個網(wǎng)頁顯示效果。
現(xiàn)在試著關(guān)掉這個樣式，會發(fā)現(xiàn)整個csdn頁面恢復(fù)了往常的紅色主題，包括網(wǎng)站logo、圖片和按鈕都恢復(fù)了。
總結(jié)上面的實驗效果，果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節(jié)點(diǎn)之上的。只要修改這部分CSS代碼：
html {  webkit-filter: grayscale(100%);  filter: grayscale(100%);}
當(dāng)然這種修改CSS的方式還有很多，我們可以在Mozilla發(fā)布的樣式效果測試平臺上看看 filter 這種不同層疊樣式效果。

平臺地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通過這幾個用力可見通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。官網(wǎng)介紹了一些語法：
/* 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;

設(shè)置一種函數(shù)，方法如下：
filter: <filter-function> [<filter-function>]* | none

如果對層疊樣式感興趣的朋友可以閱覽下官網(wǎng)的說明文檔：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

除了這些開發(fā)樣式調(diào)整的方法以外，還可以走系統(tǒng)架構(gòu)角度解決網(wǎng)頁的顯示問題，通常很多大型網(wǎng)站都用上了反向代理nginx服務(wù)器，所有網(wǎng)站訪問，都要通過nginx代理去訪問到網(wǎng)頁內(nèi)容。
既然這樣，統(tǒng)一在nginx服務(wù)器上做一些配置也是可行的，之前某大神的博客說“在Nginx負(fù)載均衡服務(wù)器上，利用sub_filter指令在輸出的HTML中增加一行如下代碼：
<style type="text/css">html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }</style>

nginx配置修改效果如下：