CSS filter濾鏡屬性及用法

filter：filtername（parameters）即 filter:濾鏡名（參數(shù))

其中，filter是濾鏡選擇符；filtername是濾鏡的屬性名，這里包括alpha、blur、chroma等

多種屬性；parameters是屬性參數(shù)值。屬性名及參數(shù)值請看下面的《filter屬性及屬性值》。

具體的應(yīng)用有兩種方法：

1、先定義好CSS ，再在頁面中需要的對象上使用預(yù)先定義好的CSS，實際上CSS的設(shè)置對話框里已經(jīng)預(yù)先將這些濾鏡的語法設(shè)置好了，我們只需填上適合的具體參數(shù)即可。

2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSS filter代碼。

可視化濾鏡屬性應(yīng)用的HTML合法的控件和它們的說明

元 素 說 明
BODY 網(wǎng)頁文檔的主體元素，所有的可見范圍都在元素內(nèi)
BUTTON 表單域的按鈕，可以有“發(fā)送(submit)”、“重置(reset)”等形式
DIV 定義了網(wǎng)頁上的一個區(qū)域，這個區(qū)域的高度、寬度或者絕對位置都是以知的
IMG 圖片元素，通過指定“src"屬性來指定圖片的來源
INPUT 輸入表單域
MARQUEE 移動字幕效果
SPAN 定義了網(wǎng)頁上的一個區(qū)域，這個區(qū)域的高度、寬度或者絕對位置都是以知的
TABLE 表格
TD 表格數(shù)據(jù)單元格
TEXTAREA 文本區(qū)域
TFOOT 多行輸入文本框
TH 表格標題單元格
THEAD 表格標題
TR 表格行




編寫CSS filter代碼基本語法：


filter屬性及屬性值

濾鏡名 說 明 濾鏡名 說 明
Alpha 設(shè)置透明度 Blur 設(shè)置模糊效果
Chroma 設(shè)置指定顏色透明 Dropshadow 設(shè)置投射陰影
Fliph 水平翻轉(zhuǎn) Flipv 垂直翻轉(zhuǎn)
Glow 對象的外邊界增加光效 Grayscale 設(shè)置灰度(降低圖片的色彩度)
Invert 設(shè)置底片效果 Light 設(shè)置燈光投影
Mask 設(shè)置透明膜 Shadow 設(shè)置陰影效果
Wave 利用正弦波紋打亂圖片 Xray 只顯示輪廓

1、Alpha：設(shè)置透明層次

　　語法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)"
　　說明：
　　Opacity：起始值，取值為0～100, 0為透明，100為原圖。
　　FinishOpacity：目標值。
　　Style：1或2或3
　　StartX：任意值
　　StartY：任意值
　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")


2、blur：創(chuàng)建高速度移動效果，即模糊效果
　　語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
　　說明：
　　Add：一般為1，或0。
　　Direction：角度，0～315度，步長為45度。
　　Strength：效果增長的數(shù)值，一般5即可。
　　例子：filter:Blur(Add="1",Direction="45",Strength="5")


3、Chroma：制作專用顏色透明
　　語法：STYLE="filter:Chroma(Color = color)"
　　說明：color：#rrggbb格式，任意。
　　例子：filter:Chroma(Color="#FFFFFF


4、DropShadow：創(chuàng)建對象的固定影子
　　語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
　　說明：Color:#rrggbb格式，任意。
　　Offx：X軸偏離值。
　　Offy：Y軸偏離值。
　　Positive：1或0。
　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")


5、FlipH：創(chuàng)建水平鏡像圖片
　語法：STYLE="filter:FlipH"
　　例子：filter:FlipH


6、FlipV：創(chuàng)建垂直鏡像圖片

　　語法：STYLE="filter:FlipV"
　　例子：filter:FlipV


7、glow：加光輝在附近對象的邊外

　　語法：STYLE="filter:Glow(Color=color, Strength=strength)"
　　說明：
　　Color：發(fā)光顏色。
　　Strength：強度(0－100)
　　例子：filter:Glow(Color="#6699CC",Strength="5")


8、gray：把圖片灰度化
　　語法：STYLE="filter:Gray"
　　例子：filter:Gray


9、invert：反色
　　語法：STYLE="filter:Invert"
　　例子：filter:Invert


10、Light：設(shè)置燈光投影

語法：Filter{light}

這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性，那么就可以調(diào)用它的“方法(Method)
"來設(shè)置或者改變屬性。“LIGHT"可用的方法有：
AddAmbient 加入包圍的光源
AddCone 加入錐形光源
AddPoint 加入點光源
Changcolor 改變光的顏色
Changstrength 改變光源的強度
Clear 清除所有的光源
MoveLight 移動光源
可以定義光源的虛擬位置，以及通過調(diào)整X軸和Y軸的數(shù)值來控制光源焦點的位置，還可以調(diào)整光源的形式
（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態(tài)的設(shè)置光源，可能回
產(chǎn)生一些意想不到的效果。后面幾頁會有具體范例。


11、mask：創(chuàng)建透明掩膜在對象上
　　語法：STYLE="filter:Mask(Color=color)"
　　例子：filter:Mask (Color="#FFFFE0")


12、shadow：創(chuàng)建偏移固定影子
　　語法：filter:Shadow(Color=color, Direction=direction)
　　說明：
　　Color：#rrggbb格式。
　　Direction：角度，0－315度，步長為45度。
　　例子：filter:Shadow (Color="#6699CC", Direction="135")


13、wave：波紋效果
　　語法：filter: Wave(Add=add，F(xiàn)req=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")


14、Xray：使對象變得像被x光照射一樣

　　語法：STYLE="filter:Xray"
　　例子：filter:Xray

15.顏色變化
語法：filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');