今天從前端的角度看看網頁變灰是如何實現的，以及相關使用技巧。

實現思路

先來看看一些主流網站是如何實現置灰的：

• BiliBili：

• 淘寶：

• 京東：

可以看到，這些網站實現置灰的方式不太一樣，但是大同小異。本質上都是使用了 CSS 中的 filter 屬性。下面是 MDN 對 filter 屬性的解釋：

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%);
}

下面是使用三個值時對應的效果：

那這個不透明度濾鏡和CSS中的 opacity 屬性有啥區別的？它們都用于控制元素的透明度。但是 filter 屬性會啟動硬件加速。瀏覽器會將計算任務卸載到圖形處理單元 (GPU) — 一種旨在加速系統內圖形渲染的專用處理器。這會提高瀏覽器的效率并釋放 CPU 來執行其他任務。

（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 屬性的值。