css中的濾鏡

前幾天在作一個app應用的時候，用到了濾鏡。在以前我只是知道有這麼個東西，可是具體的知識點其實我是不太清楚的，因此爲了讓本身能深入記憶，專門把它來記錄一下。。

1、濾鏡的標識符：「filter」;語法：style="filter:濾鏡屬性：（參數）"

2、支持度：

IE4.0以上支持的濾鏡屬性表 

濾鏡效果 描述 ：

　　　　　　Alpha 設置透明度 
　　　　　　Blur 創建模糊效果 
　　　　　　Chroma 把指定的顏色設置爲透明 
　　　　　　DropShadow 創建一種偏移的影象輪廓，即投射陰影 
　　　　　　FlipH 水平反轉 
　　　　　　FlipV 垂直反轉 
　　　　　　Glow 爲對象的外邊界增長光效 
　　　　　　Grayscale 下降圖片的彩色度 
　　　　　　Invert 將色彩、飽和度以及亮度值徹底反轉創建底片效果 
　　　　　　Light 在一個對象上進行燈光投影 
　　　　　　Mask 爲一個對象創建透明膜 
　　　　　　Shadow 創建一個對象的固體輪廓，即陰影效果 
　　　　　　Wave 在X軸和Y軸方向利用正弦波紋打亂圖片 
　　　　　　Xray 只顯示對象的輪廓

3、濾鏡的各類屬性（重點）詳解：

1.alpha  濾鏡用於設置透明度

法：filter:alpha(enabled=bEnabled,opacity=iOpcity,finishOpacity=iFinishOpacity,style=iStyle,startX=iPercent,startY=iPercent,finishX=iPercent,finishY=iPercent)

參數不少，可是有些參數是可選參數，不必定所有參數都要用上哦。

enabled 布爾值：true |false
（可選參數）      true：默認值，濾鏡激活
                       flase：濾鏡被禁止

opacity 表明透明度程度：範圍是從0~100，他們實際上是百分比的形式。也就是說，0表明徹底透明，100表明徹底不透明；

finishOpacity 是一個可選參數，若是想要設置漸變的透明效果，就可使用他們來指定結束時的透明度。範圍也是0 到 100;

style 指定了透明區域的形狀特徵。
　　　　0表明統一形狀
　　　　1表明線形
　　　　2表明放射狀
　　　　3表明長方形;

 startX   表明漸變透明效果的開始的X座標；

startY    表明漸變透明效果的開始的Y座標；

finishX   表明漸變透明效果結束的X座標；

finishY   表明漸變透明效果結束的Y座標；

實例：style="filter:alpha(opacity=10,style=3);" 

前面是IE下的，後面的透明度設置是在大衆瀏覽器下支持的，在寫代碼的時候建議最好兩個都寫上，當一個屬性沒有做用時，另外一個屬性調用也是好的。

2.Blur 模糊效果 。

語法：filter:blur(add=iadd,direction=idirection,strength=istrength)；

參數：

add      它指定圖片是否被改變成模糊效果，模糊效果是按順時針的方向進行的。
           這是一個布爾值：true（默認）或false，也能夠是1和0，1表示「是」，0表示「否」。add=false(或「0」)時Blur濾鏡不起做用，取true（或非「0」值）時Blur濾鏡起做用；

direction     用來設置模糊的方向，其值爲0至360度；其中0度表明垂直 向上，而後每45度爲一個單位。它的默認值是向左的270度。

strength     它表明有多少個像素的寬度成爲陰影，也能夠簡單地理解爲陰影的長度。它只能用整數來指定，默認值是5個像素，能夠根據實際須要來指定陰影的長度。

實例：filter: blur(1px);-webkit-filter: blur(1px);-moz-filter: blur(1px);-o-filter: blur(1px);-ms-filter: blur(1px);    數值越大，越模糊，

三、Chroma  濾鏡給予圖像一個特定的顏色透明；

語法："filter:Chroma(Color=color)"；

實例：style= "filter:chroma(color=#ceff9c)"；

四、DropShadow   添加對象的陰影效果。其工做原理是創建一個偏移量，加上較深。
語法：style= "filter:dropshadow(color=pink,offx=-5,offy=-5,positive=1)"

參數：

'Positive '    參數是一個布爾值，若是爲「TRUE（非0）」，那麼就爲任何的非透明像素創建可見的投影。

　　　　　　　　　　　　　 若是爲「FASLE（0）」，那麼就爲透明的像素部分創建透明效果 代碼以下：

offx：        陰影相對於原始對象的水平位移量，設置值爲整數，單位爲像素。若水平往右移，則正數；反之爲負數

offy：        陰影相對於原始對象的垂直位移量，設置值爲整數，單位爲像素。若垂直往下移，則正數；反之爲負數；

 /**  注意：
     *     1. 陰影的外觀受border-radius樣式的影響；
     *     2. :after和:before等僞元素會繼承陰影的效果。
     */

實例：style="filter:dropshadow(color=gray,offx=5,offy=5.positive=0)"

五、FlipH 水平反轉 ，FlipV 垂直反轉

語法:filter:fliph()              filter:filhv()

六、Glow    爲對象的外邊界增長光效 

語法：{filter:glow(color=color,strength)};

參數：

color：設置邊緣光暈的顏色，以#rrggbb的格式，或名稱；
strength：設置邊緣光暈的強度大小，設置值爲1~255的整數；

實例：style= "filter:glow(color=yellow,strength=10)"　　

七、Gray     gray濾鏡並沒有參數 ,Invert,Xray 濾鏡

語法：style="filter:gray";   /*IE5--9*/   style="filter:invert";    style="filter:xray";

Gray濾鏡是把一張圖片變成灰度（黑白）圖；（汶川大地震後不少網站色調都變灰色，就是用的這一點代碼實現的）;

Invert濾鏡是把對象的可視化屬性所有翻轉，包括色彩、飽和度、和亮度值,相似於底片效果，invert濾鏡並沒有參數,我稱它爲：反色調;

Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮，也就是所謂的「X」光片，Xray 只顯示對象的輪廓。

八、Grayscale 下降圖片的彩色度

語法：style="filter:grayscale();";

/*灰度  取值在0-1之間   能夠取值百分數或者分數*/

實例：style="filter: grayscale(1);
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(1);
            -o-filter: grayscale(1);
            -ms-filter: grayscale(1);"

我的認爲：   Grayscale 和gray 有相同的效果，只不過一個有參數設置，一個沒有參數設置。　　

九、Light 在一個對象上進行燈光投影，它可控制多個光源照向一個對象，用以調節亮度、顏色，語法；

語法：Filter{light}

這個屬性模擬光源的投射效果。一旦爲對象定義了「LIGHT'濾鏡屬性，那麼就能夠調用它的「方法(Method)'來設置或者改變屬性。「LIGHT'可用的方法有：
·AddAmbient 加入包圍的光源 
·AddCone 加入錐形光源 
·AddPoint 加入點光源 
·Changcolor 改變光的顏色 
·Changstrength 改變光源的強度 
·Clear 清除全部的光源 
·MoveLight 移動光源
方法詳解：
（1）addAmbient (iRed,iGreen,iBlue,iStrength) : 爲濾鏡添加環境光。環境光是無方向的，而且均勻的灑在頁面的表面。環境光有顏色和強度值，能夠爲對象田家更多的顏色。它一般和其餘光一塊兒使用。無返回值。
iRed : 必選項。整數值(Integer)。 指定紅色值。取值範圍爲 0 - 255 。 
iGreen : 必選項。整數值(Integer)。 指定綠色值。取值範圍爲 0 - 255 。 
iBlue : 必選項。整數值(Integer)。 指定藍色值。取值範圍爲 0 - 255 。 
iStrength : 必選項。整數值(Integer)。 指定光強度。取值範圍爲 0 - 100 。

（2）changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改變光的顏色。無返回值。
iLightNumber : 必選項。整數值(Integer)。 指定光的標識符。 
iRed : 必選項。整數值(Integer)。指定紅色值。取值範圍爲 0 - 255 。 
iGreen : 必選項。整數值(Integer)。指定綠色值。取值範圍爲 0 - 255 。 
iBlue : 必選項。整數值(Integer)。指定藍色值。取值範圍爲 0 - 255 。 
fAbsolute : 必選項。布爾值(Boolean)。指定改變是替換當前設置的絕對值，仍是加到當前設置的相對值。此參數不等於零表示採用絕對值。不然表示採用相對值。


能夠定義光源的虛擬位置，以及經過調整X軸和Y軸的數值來控制光源焦點的位置，還能夠調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬

性。若是動態的設置光源，可能回產生一些意想不到的效果。

(未測試0)
style="filter:light(); width:400; height:300" onload="javascript:this.filters.light.addAmbient(10,250,100,55)" 

onmousemove="javascript:this.filters.light.changeColor(0,150,100,50,0)"　　　　　

10、Mask 爲一個對象創建透明膜，掩飾，假面具，設置對象的屏蔽效果，就好象印章同樣印出模型的模樣；

　　　　　使用'MASK'屬性能夠爲對象創建一個覆蓋於表面的膜，其效果就象戴着有色眼鏡看物體同樣。

語法：STYLE="filter:Mask(Color=color)"；

實例：style= "filter: mask(color=‘#0000ff’)"；

十一、Shadow 創建一個對象的固體輪廓，即陰影效果 ；陰影漸變 除了具有DropShadow的陰影效果外，它還多了陰影漸變的特效；

語法：filter:Shadow(Color=color,Direction=direction)

參數：Color：#rrggbb格式。

 

Direction：用於設定動態模糊效果的方向，總單位爲360°，0表明垂直向上，並以每45°爲一個單位，默認爲225度；

 

例子：filter:Shadow(Color="#6699CC",Direction="135")；　　

十二、Wave 在X軸和Y軸方向利用正弦波紋打亂圖片 
　　語法：filter:Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)

說明：

Add：通常爲1，或0。

Freq：變形值。

LightStrength：變形百分比。

Phase：角度變形百分比。

Strength：變形強度。

例子：filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")；

1三、saturate   飽和度

語法：style="filter:saturate();"

實例：

　　/** 
     *  效果範圍，取值範圍>=0的數字或百分數，1爲無效果，0爲灰度圖
     */
     -webkit-filter: saturate(2);
     -moz-filter: saturate(2);
     -o-filter: saturate(2);
     -ms-filter: saturate(2);
     filter: saturate(2);　

1四、Hue Rotate     色相旋轉濾鏡　/*反色調  取值爲0-360deg*/　

語法：　style="filter: hue-rotate();"　;

實例：

     /**  格式，filer: hue-rotate(效果範圍)
     *  效果範圍，取值範0deg~365deg，0（默認值）爲無效果
     */
     -webkit-filter: hue-rotate(200deg);
     -moz-filter: hue-rotate(200deg);
     -o-filter: hue-rotate(200deg);
     -ms-filter: hue-rotate(200deg);
     filter: hue-rotate(200deg);

15：sepia      濾鏡是對圖片或元素總體進行棕褐色處理，就是老照片那種效果。

語法：　style="filter: hue-rotate();"　;

實例：

　　　　/*老照片效果  取值0-1之間*/

 　　　　filter: sepia(0.5);
           -webkit-filter: sepia(0.5);
           -moz-filter: sepia(0.5);
           -o-filter: sepia(0.5);
           -ms-filter: sepia(0.5);

1六、brightness   亮度

 

語法：　style="filter: brightness();"　;

 

實例：

 

 /**  格式，filer: brightness(效果範圍)
     *  效果範圍，取值範圍>=0的數字或百分數，1爲無效果
     */
     -webkit-filter: brightness(2);
     -moz-filter: brightness(2);
     -o-filter: brightness(2);
     -ms-filter: brightness(2);
     filter: brightness(2);

1七、contrast   對比度

/**  格式，filer: contrast(效果範圍)
     *  效果範圍，取值範圍>=0的數字或百分數，1爲無效果
     */
     -webkit-filter: contrast(2);
     -moz-filter: contrast(2);
     -o-filter: contrast(2);
     -ms-filter: contrast(2);
     filter: contrast(2);

前面的 內容有些我沒有通過測試，不事後面的飽和度，對比度亮度什麼的，我都有進行測試哦。。。