短短的幾行 CSS 代碼變灰整個頁面：

html,body{   
filter:grayscale(1);   
filter: gray;    /* IE9 - */
}

具體就是用到了 CSS3 的灰度濾鏡。此代碼不兼容 IE10，IE11（其實，現(xiàn)在基本上沒人用 IE了吧？）

還有一種寫法：

<style type=”text/css”>html {-webkit-filter: grayscale(100%);}</style>

上面的 CSS 代碼可能只對主流瀏覽器支持，如果你需要支持 QQ 瀏覽器、360 瀏覽器、IE 瀏覽器等等其他瀏覽器需要使用下面這段：

<style>

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;

}

</style>

將代碼放入前即可讓對應(yīng)網(wǎng)頁變黑灰色！filter 是濾鏡的意思，filter:gray 的意思就是說給頁面加上一個灰度的濾鏡，所以 html 里面的所有內(nèi)容都會變成黑白的了。不過這個濾鏡對于 chrome 和 safari 瀏覽器是無效的，所以下面會有一行-webkit-filter: grayscale(100%);這個樣式是專屬于使用 webkit 內(nèi)核的瀏覽器的，意思和 FILTER: gray;差不多，只是寫法不同罷了。