① 特殊時期網站都變成了灰色，是怎麼做到的
昨天打開各個網站，發現網頁都變成灰色了。今年國家經歷了非常慘痛的時刻，有很多烈士英雄保衛人民的安危遇難，昨天全國下降半旗，深圳時間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這種不同層疊樣式效果。
平台地址：developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通過這幾個用力可見通過filter樣式改變了圖片、顏色、模糊、對比度等等信息。官網介紹了一些語法：
/*URLtoSVGfilter*/
filter:url("filters.svg#filter-id");
/*<filter-function>values*/
filter:blur(5px);
filter:brightness(0.4);
filter:contrast(200%);
filter:drop-shadow(16px16px20pxblue);
filter:grayscale(50%);
filter:hue-rotate(90deg);
filter:invert(75%);
filter:opacity(25%);
filter:saturate(30%);
filter:sepia(60%);
/*Multiplefilters*/
filter:contrast(175%)brightness(3%);
/*Globalvalues*/
filter:inherit;
filter:initial;
filter:unset;
設置一種函數，方法如下：
filter:<filter-function>[<filter-function>]*|none
如果對層疊樣式感興趣的朋友可以閱覽下官網的說明文檔：
developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
除了這些開發樣式調整的方法以外，還可以走系統架構角度解決網頁的顯示問題，通常很多大型網站都用上了反向代理nginx伺服器，所有網站訪問，都要通過nginx代理去訪問到網頁內容。
既然這樣，統一在nginx伺服器上做一些配置也是可行的，之前某大神的博客說「在Nginx負載均衡伺服器上，利用sub_filter指令在輸出的HTML中增加一行如下代碼：
<styletype="text/css">html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>
nginx配置修改效果如下：
網站