特殊時期網站都變成了灰色，是怎么做到的？

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

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

平臺地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通過這幾個用力可見通過 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;

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

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

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

nginx配置修改效果如下：