CSS過濾器

CSS過濾器（CSS filters）最初是為了向SVG矢量圖提供不同的圖片效果。現在，CSS filters 不在局限於在SVG中使用，也可以在圖片、文字和其它元素上使用。
CSS過濾器效果並不難理解。就像photoshop里每一個圖層可以使用不同的過濾效果：正片疊加、濾色、疊加等等。CSS過濾器實現的功能與之類似，它能將圖片渲染為一種特殊的效果。
CSS過濾器對頁面性能是有影響的，不可以濫用。如果你整個頁面很多地方都使用了CSS過濾器來渲染，那么 你的頁面將會加載得十分慢。

CSS過濾器的語法非常簡單：filter:屬性名稱(取值)。屬性的取值決定該種過濾此效果的深度。例如下面grayscale屬性分別取值為100%、50%和10%。

 

 

1. img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
   
2. img { -webkit-filter: grayscale(50%); filter: grayscale(50%);}
   
3. 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%。如果你使用了很多的過濾器如：飽和度、色相反轉等，那么它們的書寫順序是非常重要的，這會直接影響最終得到的效果。

1. img { 
   
2.   -webkit-filter: grayscale(100%) opacity(50%); 
   
3.   filter: grayscale(100%) opacity(50%);
   
4. }   

CSS過濾器介紹

GRAYSCALE

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

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

SEPIA


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

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

SATURATION

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

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

BLUR


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

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

HUE-ROTATE


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

1. img { -webkit-filter: hue-rotate(45deg); filter: hue-rotate(45deg);}
   
2. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);}
   
3. 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%表示顏色完全反轉。

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

CONTRAST


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

1. img { -webkit-filter: contrast(25%); filter: contrast(25%);}
   
2. img { -webkit-filter: contrast(2500%); filter: contrast(2500%);}         

CSS contrast Filter: contrast(25%);

CSS contrast Filter: contrast(2500%);

BRIGHTNESS

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

1. img { -webkit-filter: brightness(50%); filter: brightness(50%);}
   
2. 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軸方向上的位移，第三個值是模糊的大小，第四個值是模糊的顏色。

1. img { 
   
2.   -webkit-filter: drop-shadow(5px 5px 5px red); 
   
3.   filter: drop-shadow(5px 5px 5px red);
   
4. }