CSS過濾器（CSS filters）已經(jīng)被推出有很長一段時間了。它最初是為了向SVG矢量圖提供不同的圖片效果。現(xiàn)在，CSS filters 不在局限于在SVG中使用，也可以在圖片、文字和其它元素上使用。
CSS過濾器（CSS filters）已經(jīng)被推出有很長一段時間了。它最初是為了向SVG矢量圖提供不同的圖片效果?，F(xiàn)在，CSS filters 不在局限于在SVG中使用，也可以在圖片、文字和其它元素上使用。
CSS過濾器效果并不難理解。如果你曾經(jīng)使用過photoshop，那么你就會知道每一個圖層都可以使用不同的過濾效果：正片疊加、濾色、疊加等等。CSS過濾器實(shí)現(xiàn)的功能與之類似，它能將圖片渲染為一種特殊的效果。
CSS過濾器對頁面性能是有影響的，不可以濫用。如果你整個頁面很多地方都使用了CSS過濾器來渲染，那么 你的頁面將會加載得十分慢。
使用CSS過濾器
我們將使用下面的這張圖片來結(jié)束各種不同的CSS過濾器效果。
CSS過濾器的語法非常簡單：filter:屬性名稱(取值)。屬性的取值決定該種過濾此效果的深度。例如下面grayscale屬性分別取值為100%、50%和10%。
img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
img { -webkit-filter: grayscale(50%); filter: grayscale(50%);}
img { -webkit-filter: grayscale(10%); filter: grayscale(10%);}
復(fù)制代碼
上面的語句得到的效果如下：
CSS Filter:filter: grayscale(100%);
CSS Filter:filter: grayscale(50%);
CSS Filter:filter: grayscale(10%);
上面每一個百分比數(shù)值對應(yīng)一種效果，它的意思是：這張圖片需要多少的灰度值。如果你需要將圖片轉(zhuǎn)換為黑白色，使用的值是100%。
你也可以同時為一張圖片應(yīng)用多個過濾器，它們會按層級的順序被執(zhí)行。例如下面的例子，圖片先被轉(zhuǎn)換為100%的黑白色，然后透明度降低到50%。如果你使用了很多的過濾器如：飽和度、色相反轉(zhuǎn)等，那么它們的書寫順序是非常重要的，這會直接影響最終得到的效果。
img {
-webkit-filter: grayscale(100%) opacity(50%);
filter: grayscale(100%) opacity(50%);
}
復(fù)制代碼
CSS過濾器介紹
GRAYSCALE
Grayscale是灰度濾鏡，前面已經(jīng)做了介紹：
img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
復(fù)制代碼
SEPIA
Sepia是復(fù)古風(fēng)格濾鏡。和Grayscale濾鏡一樣，它的取值可以從0%到100%。
img { -webkit-filter: sepia(100%); filter: sepia(100%);}
復(fù)制代碼
SATURATION
Saturation是飽和度濾鏡。它能將圖片的顏色變得更濃烈。飽和度濾鏡的最大取值不是100%，你可以指定一個很大的值，如1000，使圖片的視覺效果變得非常夸張。
img { -webkit-filter: saturate(1000%); filter: saturate(1000%);}
復(fù)制代碼
BLUR
Blur是模糊濾鏡。它的效果和在photoshop中對圖片使用高斯模糊的效果是一樣的。你可以設(shè)置一個一像素為單位的值，這個值表示模糊的大小。像素值越高，圖片就越模糊。
img { -webkit-filter: blur(5px); filter: blur(5px);}
復(fù)制代碼
HUE-ROTATE
Hue-rotate是色相反轉(zhuǎn)濾鏡。這個濾鏡和前面的濾鏡相比有些難理解：它使用角度值來轉(zhuǎn)換元素的顏色。這有一點(diǎn)像HSL顏色d的色環(huán)，從0度開始，旋轉(zhuǎn)一周是360度。你所要做的就是選擇色環(huán)上的某個點(diǎn)（某個角度）來作為色相反轉(zhuǎn)的值。
img { -webkit-filter: hue-rotate(45deg); filter: hue-rotate(45deg);}
img { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);}
img { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
復(fù)制代碼
CSS hue-rotate Filter: hue-rotate(45deg);
CSS hue-rotate Filter: hue-rotate(90deg);
CSS hue-rotate Filter: hue-rotate(180deg);
INVERT
Invert是顏色反轉(zhuǎn)濾鏡。顏色反轉(zhuǎn)濾鏡可以將黑色轉(zhuǎn)換為白色，紅色轉(zhuǎn)換為綠色等等。它有一點(diǎn)像色相反轉(zhuǎn)濾鏡，但是它的取值基于百分比，0%表示顏色不改變，100%表示顏色完全反轉(zhuǎn)。
img { -webkit-filter: invert(100%); filter: invert(100%); }
復(fù)制代碼
CONTRAST
Contrast是對比度濾鏡。如果一張圖片沒有色彩對比度，它通常是一張灰度很深的圖片。對比度濾鏡取值100%時不會改變圖片，這是圖片的默認(rèn)狀態(tài)。如果你不想使用對比度效果，設(shè)置為0%。如果你想要一張圖片有很大的對比度，或者想是圖片中的元素都變成純色，可以設(shè)置一個很大的百分比值，如2500%，當(dāng)然這是一個非?？鋸埖闹怠?/p>
img { -webkit-filter: contrast(25%); filter: contrast(25%);}
img { -webkit-filter: contrast(2500%); filter: contrast(2500%);}
復(fù)制代碼
CSS contrast Filter: contrast(25%);
CSS contrast Filter: contrast(2500%);
BRIGHTNESS
Brightness是明亮度濾鏡。正如它的名字，明亮度濾鏡用于改變圖片的明亮度。當(dāng)它取值為100%的時候，圖片不被改變，這和對比度濾鏡是一樣的。你可以增加百分比來使圖片變亮，或降低百分比使圖片變暗。
img { -webkit-filter: brightness(50%); filter: brightness(50%);}
img { -webkit-filter: brightness(150%); filter: brightness(150%);}
復(fù)制代碼
CSS brightness Filter: brightness(50%);
CSS brightness Filter: brightness(150%);
DROP SHADOW
Drop Shadow是陰影濾鏡。你也許會問：盒子陰影和文字陰影不是有專門的CSS屬性嗎？為什么我們還要使用這個陰影濾鏡。沒錯！box-shadow和text-shadow屬性可以很好的工作在規(guī)則的容器和文字上，但是對于不規(guī)則的形狀，它們就有些無能為力了。例如一張透明的PNG圖片或一個五角星形狀。Drop Shadow陰影濾鏡會制作一個圖形的副本，然后使用你設(shè)定的值來進(jìn)行位移，并渲染為你設(shè)定的顏色。如下面的例子所示，第一個值是X方向上的位移，第二個值是Y軸方向上的位移，第三個值是模糊的大小，第四個值是模糊的顏色。
img {
-webkit-filter: drop-shadow(5px 5px 5px red);
filter: drop-shadow(5px 5px 5px red);
}
復(fù)制代碼
小結(jié)
使用CSS過濾器可以在不使用photoshop等圖像編輯軟件的情況下將圖片制作出各種特殊的效果。如果你想制作更復(fù)雜的圖像效果，可以使用CSS的合成模式。希望這篇文章對你有所幫助！
