CSS filter濾鏡屬性及用法

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

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

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

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

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

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

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

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




編寫CSS filter代碼基本語(yǔ)法：


filter屬性及屬性值

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

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

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


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


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


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


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


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

　　語(yǔ)法：STYLE="filter:FlipV"
　　例子：filter:FlipV


7、glow：加光輝在附近對(duì)象的邊外

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


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


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


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

語(yǔ)法：Filter{light}

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


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


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


13、wave：波紋效果
　　語(yǔ)法：filter: Wave(Add=add，F(xiàn)req=freq，LightStrength=strength，Phase=phase，Strength=strength)
　　說(shuō)明：
　　Add：一般為1，或0。
　　Freq：變形值。
　　LightStrength：變形百分比。
　　Phase：角度變形百分比。
　　Strength：變形強(qiáng)度。
　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")


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

　　語(yǔ)法：STYLE="filter:Xray"
　　例子：filter:Xray

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