CSS過濾器（CSS filters）已經被推出有很長一段時間了。它最初是為了向SVG矢量圖提供不同的圖片效果。現在，CSS filters 不在局限于在SVG中使用，也可以在圖片、文字和其它元素上使用。

CSS過濾器效果并不難理解。如果你曾經使用過photoshop，那么你就會知道每一個圖層都可以使用不同的過濾效果：正片疊加、濾色、疊加等等。CSS過濾器實現的功能與之類似，它能將圖片渲染為一種特殊的效果。

CSS過濾器對頁面性能是有影響的，不可以濫用。如果你整個頁面很多地方都使用了CSS過濾器來渲染，那么 你的頁面將會加載得十分慢。

?使用CSS過濾器

我們將使用下面的這張圖片來結束各種不同的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%);}?????????????????????????????

上面的語句得到的效果如下：

CSS Filter:filter: grayscale(100%); CSS Filter:filter: grayscale(50%); CSS Filter:filter: grayscale(10%);

上面每一個百分比數值對應一種效果，它的意思是：這張圖片需要多少的灰度值。如果你需要將圖片轉換為黑白色，使用的值是100%。

你也可以同時為一張圖片應用多個過濾器，它們會按層級的順序被執行。例如下面的例子，圖片先被轉換為100%的黑白色，然后透明度降低到50%。如果你使用了很多的過濾器如：飽和度、色相反轉等，那么它們的書寫順序是非常重要的，這會直接影響最終得到的效果。

img { ??-webkit-filter: grayscale(100%) opacity(50%); ??filter: grayscale(100%) opacity(50%); }????????????????????????????

?CSS過濾器介紹

?GRAYSCALE

Grayscale是灰度濾鏡，前面已經做了介紹：

img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}?????????????????????????????

?SEPIA

Sepia是復古風格濾鏡。和Grayscale濾鏡一樣，它的取值可以從0%到100%。

img { -webkit-filter: sepia(100%); filter: sepia(100%);}??????????????????????????

?SATURATION

Saturation是飽和度濾鏡。它能將圖片的顏色變得更濃烈。飽和度濾鏡的最大取值不是100%，你可以指定一個很大的值，如1000，使圖片的視覺效果變得非常夸張。

img { -webkit-filter: saturate(1000%); filter: saturate(1000%);}??????????????????????????????

?BLUR

Blur是模糊濾鏡。它的效果和在photoshop中對圖片使用高斯模糊的效果是一樣的。你可以設置一個一像素為單位的值，這個值表示模糊的大小。像素值越高，圖片就越模糊。

img { -webkit-filter: blur(5px); filter: blur(5px);}?????????????????????????????

?HUE-ROTATE

Hue-rotate是色相反轉濾鏡。這個濾鏡和前面的濾鏡相比有些難理解：它使用角度值來轉換元素的顏色。這有一點像HSL顏色d的色環，從0度開始，旋轉一周是360度。你所要做的就是選擇色環上的某個點（某個角度）來作為色相反轉的值。

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

CSS hue-rotate Filter: hue-rotate(45deg); CSS hue-rotate Filter: hue-rotate(90deg); CSS hue-rotate Filter: hue-rotate(180deg);

?INVERT

Invert是顏色反轉濾鏡。顏色反轉濾鏡可以將黑色轉換為白色，紅色轉換為綠色等等。它有一點像色相反轉濾鏡，但是它的取值基于百分比，0%表示顏色不改變，100%表示顏色完全反轉。

img { -webkit-filter: invert(100%); filter: invert(100%); }?????????????????????????????

?CONTRAST

Contrast是對比度濾鏡。如果一張圖片沒有色彩對比度，它通常是一張灰度很深的圖片。對比度濾鏡取值100%時不會改變圖片，這是圖片的默認狀態。如果你不想使用對比度效果，設置為0%。如果你想要一張圖片有很大的對比度，或者想是圖片中的元素都變成純色，可以設置一個很大的百分比值，如2500%，當然這是一個非常夸張的值。

img { -webkit-filter: contrast(25%); filter: contrast(25%);} img { -webkit-filter: contrast(2500%); filter: contrast(2500%);}?????????????????????????????

CSS contrast Filter: contrast(25%); CSS contrast Filter: contrast(2500%);

?BRIGHTNESS

Brightness是明亮度濾鏡。正如它的名字，明亮度濾鏡用于改變圖片的明亮度。當它取值為100%的時候，圖片不被改變，這和對比度濾鏡是一樣的。你可以增加百分比來使圖片變亮，或降低百分比使圖片變暗。

img { -webkit-filter: brightness(50%); filter: brightness(50%);} img { -webkit-filter: brightness(150%); filter: brightness(150%);}?????????????????????????????

CSS brightness Filter: brightness(50%); CSS brightness Filter: brightness(150%);

?DROP SHADOW

Drop Shadow是陰影濾鏡。你也許會問：盒子陰影和文字陰影不是有專門的CSS屬性嗎？為什么我們還要使用這個陰影濾鏡。沒錯！box-shadow和text-shadow屬性可以很好的工作在規則的容器和文字上，但是對于不規則的形狀，它們就有些無能為力了。例如一張透明的PNG圖片或一個五角星形狀。Drop Shadow陰影濾鏡會制作一個圖形的副本，然后使用你設定的值來進行位移，并渲染為你設定的顏色。如下面的例子所示，第一個值是X方向上的位移，第二個值是Y軸方向上的位移，第三個值是模糊的大小，第四個值是模糊的顏色。

img { ??-webkit-filter: drop-shadow(5px5px 5px red); ??filter: drop-shadow(5px5px 5px red); }?????????????????????????????

?小結

使用CSS過濾器可以在不使用photoshop等圖像編輯軟件的情況下將圖片制作出各種特殊的效果。如果你想制作更復雜的圖像效果，可以使用CSS的合成模式。希望這篇文章對你有所幫助！

本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504181704.html

總結

以上是生活随笔為你收集整理的CSS FILTERS：CSS过滤器能够做什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。