Filter Effects in Web (1)：CSS filter

CSS · 發表 2019-05-08 21:54:25

摘要：編者按：本文作者高峰，360奇舞團前端工程師，W3C效能工作組/WOT工作組成員。過濾器效果可以在元素展示之前對元素的渲染進行處理。它是基於圖片的效果，主要接受0或多個圖片作為輸入，然後指定特定的效果引數，最後生成一張圖片作為輸出。輸出的圖片會替代原始元素在DOM中渲染，或者被當做一個C...

編者按：本文作者高峰，360奇舞團前端工程師，W3C效能工作組/WOT工作組成員。

過濾器效果可以在元素展示之前對元素的渲染進行處理。它是基於圖片的效果，主要接受0或多個圖片作為輸入，然後指定特定的效果引數，最後生成一張圖片作為輸出。輸出的圖片會替代原始元素在DOM中渲染，或者被當做一個CSS圖片值。

雖然過濾器效果一開始是為了SVG而設計的，但是在CSS中，我們也同樣可以使用(通過 filter 屬性)。

本文主要介紹的就是這一部分，CSS中的filter效果。後續我會在給大家介紹一下SVG中的filter效果。

CSS中的 filter 屬性

在CSS中，我們可以通過 filter 屬性使用過濾器效果。該屬性可以應用在CSS中的任何元素上，除此之外，還可以應用在SVG中的容器元素（除 <defs> 外）、圖形類元素（如 circle 、 polyline 等）以及 <use> 元素上。

filter 值的格式為： filter: none | <filter-value-list> 。

其中 none 表示無過濾器效果。 <filter-value-list> 等於 [ <filter-function> | <url> ]+ 。 <filter-function> 是filter屬性預設的效果函式，後面會詳細介紹。 <url> 表示引用svg中的 <filter> 元素。如 url(commonfilters.svg#filter) 。如果引用的內容不存在或者不是一個filter元素，則忽略該引用，這一部分的細節我們會在下一篇SVG filter中詳細介紹。

當元素的 filter 不為 none 時，會建立一個層疊上下文，這對元素的層疊會產生影響。如下所示，對圖中圖片一應用 drop-shadow filter效果，其層級會覆蓋在圖片二的原圖之上。

如果你對於CSS中元素的層級有什麼疑問，可以參考我之前寫的另一篇文章《 CSS的“層”巒“疊”翠》。這篇文章會向你解釋什麼是層疊上下文，元素之間如何決定堆疊順序。

預設的filter效果函式

CSS中預設的filter效果函式包括： blur() 、 brightness() 、 contrast() 、 drop-shadow() 、 grayscale() 、 hue-rotate() 、 invert() 、 opacity() 、 saturate() 、 sepia() 。

需要注意的是，對於這些效果函式，初始值和預設值（指定了函式但未傳值）並不都是一樣的。如 grayscale() 、 sepia() 、 invert() 當引數預設時，值為 1 ，等價於100%的效果，而它們的初始值是 0 。更需要的注意的是，這幾種特殊情況在不同瀏覽器中表現並不一樣，所以在使用時大家不要偷懶寫了函式卻不傳值。

blur() 高斯模糊

blur() 向元素應用高斯模糊。該函式語法格式為： blur( <length>? ) ，接受一個長度值，不接受百分比，表示模糊半徑。不接受負值，初始值和預設值都是 0px 。

如下圖所示，我們給圖片元素應用了 filter: blur(5px); 。

brightness() 明亮度

brightness() 改變元素的明亮度。其語法格式為： brightness( <number-percentage>? ) ，值為數字或百分比。 0% 會將圖片變為全黑， 100% 表示保持原樣。初始值與預設值均為 1 。無效值或者負值均被視為 1 。大於1的值表示增加曝光度。

如下圖所示，分別給出了值為0%， 50%，100%，200%的情況。

contrast() 對比度

contrast() 改變元素的對比度。其語法格式為： contrast( <number-percentage>? ) ，值為數字或百分比。 0% 則完全變為灰色， 100% 表示保持原樣。初始值和預設值均為 1 。無效值或者負值均被視為 1 。大於1的值表示增加對比度。

如下圖所示，分別給出了值為0%， 50%，100%，200%的情況。

drop-shadow() 投影

drop-shadow() 向元素應用一個投影效果。該函式接受的引數與CSS3的 box-shadow 屬性類似，除了不能接受inset引數。區別在於使用filter，某些瀏覽器會啟用硬體加速來進行優化。

語法格式如下： drop-shadow( <color>? && <length>{2,3} ) 。其中三個長度值依次對應 <offset-x> <offset-y> <blur-radius> ，表示x軸偏移、y軸偏移以及模糊半徑。如 filter: drop-shadow(16px 16px 10px black) 。其中 顏色值 black 放在前面或者後面都可以 。

該方法的初始值中各長度為 0 ，顏色值為 transparent 。

該方法的預設值中個長度也為 0 ，但是顏色值會有一點比較特殊，即其會使用當前元素的 color 值。

如下例所示。圖二在drop-shadow中指定了顏色，圖三沒有指定，則圖三應用了 color 顏色。

grayscale() 灰度變換

grayscale() 能夠對影象進行灰度處理。該函式接受一個值，語法格式為 grayscale( <number-percentage>? ) 。值可以為數字或者百分比。 100% 表示完全為灰度的， 注意不是全灰色的，只是變成黑白的了 。 0% 表示保持原樣。 初始值為 0 ，但預設值為 1 。無效值或者負值均被視為 0 。大於1的值效果等同於 100% 。

如下圖展示了，值為0%，50%， 100%，200%的情況。

hue-rotate() 色調旋轉

hue-rotate() 可以對指定元素應用色調旋轉，語法格式為 hue-rotate( [ <angle> | <zero> ]? ) 。接受一個角度 angle 值。用於定義將顏色在色環上旋轉多少度。初始值和預設值均為 0deg ，表示無變化。無最大值限制，超過 360deg 的值會折算成小於 360deg 的等價值。

色環上各顏色的角度參考下圖：

如果大家對顏色有興趣，也可以看一看二哥之前釋出的《給你點顏色看看》一文。

下面我們可以看下將色調旋轉90度後上圖的效果。對照上面的色環角度，可以預想天空變成了粉色。確實應用後的效果也是如此。

invert() 顏色反轉

invert() 會將圖片中的顏色進行反轉。該函式語法格式為 invert( <number-percentage>? ) ，接受一個值，值可以為數字或者百分比。 100% 表示完全反轉， 0% 表示保持原樣。 初始值為 0 ，但預設值為 1 。無效值或者負值均被視為 0 。大於1的值效果等同於 100% 。

如下圖展示了，值為0%，50%， 100%，200%的效果。

opacity() 透明

opacity() 會向圖片應用透明效果。該函式語法格式為 opacity( <number-percentage>? ) ，接受一個值，值可以為數字或者百分比。 0% 表示完全透明， 100% 保持原樣。初始值和預設值均為 1 。無效值或者負值均被視為 1 。大於1的值效果等同於 100% 。

該值與常用的CSS屬性 opacity 類似，區別在於使用filter時，某些瀏覽器會開啟硬體加速來保證效能。此外還可以在過濾器函式中指定多個 opacity() ，效果會產生疊加。

如下圖展示了，值為0%，25%，兩次50%， 50%， 100%，200%的效果。可以發現兩次50%的效果會發生疊加，等價於25%的效果。

saturate() 飽和度

saturate() 可以改變影象色彩的飽和度。該函式的語法格式為 saturate( <number-percentage>? ) ，接受一個值，值可以為數字或者百分比。 0% 表示完全不飽和，效果等同於 greyscale(100%) 完全灰度。 100% 表示保持原樣。初始值和預設值均為 1 。無效值或者負值均被視為 1 。大於 1 則表示超飽和。