在發生重大哀悼事件時候，需要緊急將網站變灰以示哀悼，在此蟲蟲給大家總結了幾種方法，通過簡單修改一下站點樣式即可實現。

修改源碼

另外主要方便快捷的方法是使用 CSS 樣式的 grayscale() 方法。

grayscale() : 對圖片進行灰度轉換，grayscale 是 的子屬性，當 100% 參數時候的效果如下：

最簡單地把頁面的 開始標籤中間之間加：

style="-webkit-filter: grayscale(100%);"

或者修改站點 CSS 樣式

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

將上述代碼添加加到 CSS 最頂端就可以實現。

爲了兼容多種瀏覽器標準，可以增加一下樣式：

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}

如果網站後臺無法定義 CSS 樣式，這需要在站點模板頁的 head 標籤中間插入 style 標誌位：

<style>
html{-webkit-filter: grayscale(100%);}
</style>

對於一些老的網站，爲了支持該函數需要修改 html 標頭，將其修改爲最新標準標頭纔可以：對一些使用 Flash（不在建議使用）的老站點，起顏色可能也不支持 CSS 濾鏡變灰，則需要在可以在 FLASH 代碼的 <object …> 和之間插入：

<param value="false" />
<param value="opaque" />

Nginx 代理

對於一下沒有辦法修改源站代碼的情況下，也可以在 Nginx 站點代理無服務器上，通過 sub_filter 指令來實現。

受限確保 nginx 支持 http_sub_module 模塊，如果不支持需要重新編譯安裝 Nginx，自愛安裝時候添加 build 參數—with-http_sub_module

然後在 Nginx 的 http 模塊增加如下代碼：

sub_filter '</head>' '<style type="text/css">html{ -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>';sub_filter_once on;

然後 nginx -t 測試配置正常無誤

nginx -s reload 重啓 nginx 即可

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XlkLYf9vcOd621cg4Hs6gQ