先來看看一些主流網站是如何實現置灰的：
- BiliBili：
- 淘寶：
- 京東：
- 掘金：
CSS 屬性 filter 將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像、背景和邊框的渲染。
簡單來說，filter 屬性就是用來給元素添加不同的濾鏡。該屬性中支持傳入多種 Filter 函數，其中 grayscale() 函數就是用於置灰的關鍵。grayscale() 函數將改變輸入圖像灰度，該函數有一個參數，表示轉換爲灰度的比例。當值爲 100% 時，完全轉爲灰度圖像；當值爲 0% 時圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘數。若未設置值，默認是 0。
因此，只要將頁面 html 元素設置以下樣式即可實現頁面置灰：
html { filter: grayscale(100%); }
那爲啥很多網站的置灰不止這一條呢？可以看到京東的置灰代碼如下：
html.o2_gray { -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); }
其實這些屬性最終的實現效果都是一樣的，它們爲了對 filter 屬性進行兼容。filter 屬性是 CSS3 增加的屬性，在不同瀏覽器以及低版本瀏覽器上，filter 屬性的兼容性不盡相同： 
-webkit-filter： 帶有 webkit 前綴可以在 webkit 內核的瀏覽器中生效；-moz-filter：帶有 moz 前綴可以在 Firefox 瀏覽器中生效；-ms-filter：帶有 ms 前綴可以在 IE 瀏覽器生效；-o-filter：帶有 o 前綴可以在 Opera 瀏覽器生效；- 最後三行都是爲了兼容 IE 內核的瀏覽器。
那如何實現動態添加呢？只需要將這些濾鏡屬性寫在一個類中，在需要的時候動態的將該類型添加到 html 標籤上即可。
.gray { -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); }
相關拓展
接下來我們看看 filter 屬性還有哪些實用的屬性值！
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();
（1）blur()：模糊
blur() 函數用於設置元素**模糊效果，**它將高斯模糊視覺效果應用於元素。此函數接受一個 CSS 長度值來確定屏幕上有多少像素需要相互融合以生成模糊結果。 傳遞的 CSS 長度值越大，應用到元素的模糊度就越高。如果不提供值，則使用默認值 0。
.image { -webkit-filter: blur(0|2px|5px); filter: blur(0|2px|5px); }
下面是使用三個值時對應的效果： 
（2）brightness()：亮度
brightness() 函數可用於調整圖像的亮度級別，使其看起來更亮或更暗。當值爲 0% 時，會產生全黑圖像。值爲 100% 或 1 會使圖像保持其原始亮度級別。大於或小於 100% 或 1 的值決定圖像的暗度或亮度。
.image { -webkit-filter: brightness(50%|100%|200%); filter: brightness(50%|100%|200%); }
下面是使用三個值時對應的效果：
（3）contrast()：對比度
contrast() 函數用於調整圖像的對比度，也就是調整圖像最暗和最亮部分之間的亮度差異 。 它接受百分比或小數值來確定圖像的對比度級別——值爲 0 會導致完全灰色的圖像。高於 100% 和 1 的值會增加對比度，而低於 100% 的參數會降低圖像的對比度。
.image { -webkit-filter: contrast(50%|100%|200%); filter: contrast(50%|100%|200%); }
下面是使用三個值時對應的效果：
（4）opacity()：不透明度
opacity() 函數將透明效果應用於圖像。它接受百分比或小數值來決定應用於圖像的透明度。0% 或 0 的不透明度將產生完全透明的元素。100% 不透明度將顯示不透明。將不透明度設置在 0% 和 100% 之間將使元素或圖像部分透明。
.image { -webkit-filter: opacity(10%|40%|80%); filter: opacity(10%|40%|80%); }
下面是使用三個值時對應的效果： 
（5）sepia() ：棕褐色
sepia() 函數可以爲圖像添加柔和的褐色色調，使圖像看起來更溫暖、更復古。它類似於使用灰度濾鏡，但色調爲褐色。它接受 0 到 1 之間的小數值，或最大爲 100% 的百分比值。值爲 0 會使圖像保持不變。值爲 100% 或 1 會將圖像完全變爲棕褐色，而介於 0% 和 100% 之間的值會使圖像的色調介於其原始顏色和完全棕褐色之間。
.image { -webkit-filter: sepia(10%|40%|80%); filter: sepia(10%|40%|80%); }
下面是使用三個值時對應的效果：
（6）drop-shadow()：陰影
drop-shadow() 函數用於增加圖像的陰影，和 box-shadow 的作用類似，使圖像看起來更加立體。
drop-shadow() 函數接受四個參數：
<offset-x>：長度值，指定元素和投影之間的水平距離。正值將陰影置於元素右側，負值將陰影置於左側。<offset-y>：長度值，指定元素和投影之間的垂直距離。正值將陰影置於元素下方，負值將陰影置於其上方。<blur-radius>: 陰影的模糊半徑指定爲 CSS 長度單位。值越大，陰影變得越模糊。如果未指定，則默認爲 0，產生清晰且不模糊的陰影。不允許使用負值。<color>：陰影的顏色。如果未指定，則默認爲黑色。
.image-1 { filter: drop-shadow(0); } .image-2 { -webkit-filter: drop-shadow(4px 4px 10px yellow); filter: drop-shadow(4px 4px 10px yellow); } .image-3 { -webkit-filter: drop-shadow(8px 8px 12px yellow); filter: drop-shadow(8px 8px 12px yellow); }
下面是使用三個值時對應的效果：
（7）saturate()：飽和度
saturate() 函數用於改變元素中顏色的飽和度。飽和元素的顏色比較鮮豔；對於曝光不足的圖像可以增加飽和度，反之亦然。 飽和度可以用百分比表示，0% 表示完全不飽和，100% 表示與原圖像一樣。
.image { -webkit-filter: saturate(10%|150%|350%); filter: saturate(10%|150%|350%); }
下面是使用三個值時對應的效果：
（8）注意事項
上面介紹的濾鏡都是單個使用的，其實 filter 屬性支持設置多個濾鏡，其語法如下：
.multiple-effects { filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); }
CSS 會根據它們出現的順序將它們應用於元素：
img { filter: opacity(50%) drop-shadow(20px 10px 0px black); }
除此之外，filter 屬性還接受以下兩個值：
initial：filter屬性的默認值，會解析爲none。inherit：從元素的直接父級計算的filter屬性的值。
轉載鏈接：https://juejin.cn/post/7172125469012131847