因?yàn)楸娝苤脑?，這幾天，所有的網(wǎng)站都變灰了。作為一名前端開發(fā)，我們自然是想探究一下如何實(shí)現(xiàn)的。

首先打開榮耀官網(wǎng)，按Ctrl+Shift+i，看到html下設(shè)置的樣式

如下一行代碼就實(shí)現(xiàn)了首頁變灰：

然后打開沒有變灰的vant-weapp某個頁面

將代碼復(fù)制到html標(biāo)簽下，神奇的事情就發(fā)生了

關(guān)于?filter 一起來看看吧：

• 定義

  filter?將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。

• 語法

• 相關(guān)描述

• url() 獲取指向 SVG 濾鏡的 URI，該?SVG filter?可以嵌入到外部 XML 文件中

• blur()?函數(shù)將高斯模糊應(yīng)用于輸入圖像。radius?定義了高斯函數(shù)的標(biāo)準(zhǔn)偏差值，或者屏幕上有多少像素相互融合，因此，較大的值將產(chǎn)生更多的模糊。若沒有設(shè)置值，默認(rèn)為?0。該參數(shù)可以指定為 CSS 長度，但不接受百分比值。

• brightness()?函數(shù)將線性乘法器應(yīng)用于輸入圖像，使其看起來或多或少地變得明亮。值為?0%?將創(chuàng)建全黑圖像。值為?100%?會使輸入保持不變。其他值是效果的線性乘數(shù)。如果值大于?100%?提供更明亮的結(jié)果。若沒有設(shè)置值，默認(rèn)為?1。

• contrast()?函數(shù)可調(diào)整輸入圖像的對比度。值是?0%?的話，圖像會全黑。值是?100%，圖像不變。值可以超過?100%，意味著會運(yùn)用更低的對比。若沒有設(shè)置值，默認(rèn)是?1

• drop-shadow()?函數(shù)對輸入圖像應(yīng)用陰影效果。陰影可以設(shè)置模糊度的，以特定顏色畫出的遮罩圖的偏移版本，最終合成在圖像下面。函數(shù)接受?<shadow>（在?CSS3 背景中定義）類型的值，除了?inset?和?spread?關(guān)鍵字。該函數(shù)與已有的?box-shadow?屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。

• grayscale()?函數(shù)將改變輸入圖像灰度。amount?的值定義了轉(zhuǎn)換的比例。值為?100%?則完全轉(zhuǎn)為灰度圖像，值為?0%?圖像無變化。值在?0%?到?100%?之間，則是效果的線性乘數(shù)。若未設(shè)置值，默認(rèn)是?0。

• hue-rotate()?(en-US)?函數(shù)在輸入圖像上應(yīng)用色相旋轉(zhuǎn)。angle?一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為?0deg，則圖像無變化。若值未設(shè)置值，默認(rèn)為?0deg。該值雖然沒有最大值，超過?360deg?的值相當(dāng)于又繞一圈。

• invert()?(en-US)?函數(shù)反轉(zhuǎn)輸入圖像。amount?的值定義轉(zhuǎn)換的比例。值為?100%?則圖像完全反轉(zhuǎn)。值為?0%?則圖像無變化。值在?0%?和?100%?之間，則是效果的線性乘數(shù)。若未設(shè)置值，則默認(rèn)為?0。

• opacity()?轉(zhuǎn)化圖像的透明程度。amount?的值定義轉(zhuǎn)換的比例。值為?0%?則是完全透明，值為?100%?則圖像無變化。值在?0%?和?100%?之間，則是效果的線性乘數(shù)。也相當(dāng)于圖像樣本乘以數(shù)量。若未設(shè)置值，則默認(rèn)為?1。該函數(shù)與已有的?opacity?屬性很相似，不同之處在于通過?filter，一些瀏覽器為了提升性能會提供硬件加速。

• saturate()?(en-US)?函數(shù)轉(zhuǎn)換圖像飽和度。amount?的值定義轉(zhuǎn)換的比例。值為?0%?則是完全不飽和，值為?100%?則圖像無變化。其他值是效果的線性乘數(shù)。超過?100%?則有更高的飽和度。若未設(shè)置值，則默認(rèn)為?1。

• sepia()?(en-US)?函數(shù)將圖像轉(zhuǎn)換為深褐色。amount?的值定義轉(zhuǎn)換的比例。值為?100%?則完全是深褐色的，值為?0%?圖像無變化。值在?0%?到?100%?之間，值是效果的線性乘數(shù)。若未設(shè)置值，則默認(rèn)為?0。

• 復(fù)合函數(shù)：你可以組合任意數(shù)量的函數(shù)來控制渲染

更多關(guān)注公眾號：前端知識分享喵