通過css設置filter 屬性設置頁面整體置灰

效果圖:

通過設置 filter 屬性為 grayscale(100%)，頁面中的所有元素都會被應用灰色濾鏡效果，使整個頁面呈現灰度效果。

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

filter 屬性是用來給元素添加不同的濾鏡; grayscale() 函數將改變輸入圖像灰度，該函數有一個參數，表示轉換為灰度的比例。當值為 100% 時，完全轉為灰度圖像；當值為 0% 時圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘數。若未設置值，默認是 0。

注意：如果您只想將特定區域置灰，可以選擇使用其他 CSS 選擇器來選擇您希望應用濾鏡效果的特定元素或容器。

兼容不同瀏覽器代碼:

html{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);-webkit-filter: gray;filter: gray;-webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
-webkit-filter：帶有 webkit 前綴可以在 webkit 內核的瀏覽器中生效；
-moz-filter：帶有 moz  前綴可以在 Firefox 瀏覽器中生效；
-ms-filter：帶有 ms 前綴可以在 IE 瀏覽器生效；
-o-filter：帶有 o 前綴可以在 Opera 瀏覽器生效；
最后三行都是為了兼容 IE 內核的瀏覽器。