前端如何實現網頁變灰功能？

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

實現思路

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

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

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