filter:filtername(parameters) 即 filter:濾鏡名稱(參數)
濾鏡效果 功能描述
Alpha 設置不同的透明度變化效果
Blur 建立模糊效果
DropShadow 建立一種偏移的影象輪廓,即投射陰影
FlipH 水平翻轉
FlipV 垂直翻轉
Glow 爲對象的邊界增加色彩光效
Gray 將圖片以灰度形式顯示
Invert 將色彩、飽和度以及亮度值完全反轉,類似底片效果
Light 在一個對象上進行燈光投影
Mask 爲一個對象建立彩色透明遮罩
Shadow 爲對象建立輪廓的影效果
Wave 在X軸和Y軸方向利用正弦波打亂圖片
Xray 只顯示對象的輪廓
具體的應用有兩種方法:
1、 先定義好CSS ,再在頁面中需要的對象上使用預先定義好的CSS,實際上CSS的設置對話框裏已經預先將這些濾鏡的語法設置好了,我們只需填上適合的具體參數即可:
2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSS filter代碼。
a.Alpha 濾鏡
"Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標,可以指定各種不同範圍的透明度。
Alpha 濾鏡語法 {FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,
style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}
參數含義分別如下:
參數 說明
opacity 透明度。默認的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
finishopacity 是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
style 指定透明區域的形狀特徵:
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形
startx 漸變透明效果開始處的 X座標。
starty 漸變透明效果開始處的 Y座標。
finishx 漸變透明效果結束處的 X座標。
finishy 漸變透明效果結束處的 Y座標。
b.Blur 濾鏡 用手指在一幅尚未乾透的畫面迅速劃過時,畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。
Blur濾鏡語法 HTML:{filter:blur(add=add,direction=direction,
strength=strength)}
Script語言: [oblurfilter=] object.filters.blur
參數含義分別如下:
參數 說明
add 它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的,
這是一個布爾值:ture (默認)或false
direction 該參數用來設置模糊的方向。
0度代表垂直向上,每45度爲一個單位,默認值是向左的270度
strength 只能使用整數來指定,代表有多少像素的寬度將受到模糊影響,默認是5個像素。
c.DropShadow 濾鏡
“DropShaow",顧名思義就是添加對象的陰影效果。其工作原理是建立一個偏移量,加上色彩。
DropShadow 濾鏡語法 {filter:dropshadow
(color=color,offx=ofx,offy=offy,positive=positive)}
參數含義如下:
參數 說明
Color 代表投射陰影的顏色
offx X方向陰影的偏移量
offy Y方向陰影的偏移量
Positive 布爾值
如果爲TRUE(非0),就爲任何的非透明像素建立可見的投影
如果爲FASLE(0),就爲透明的像素部分建立透明效果
d.FlipH, FlipV 濾鏡
FlipH 濾鏡實現水平反轉 FlipH 濾鏡語法 {filter:filph}
FlipV 濾鏡實現垂直反轉
FlipV 濾鏡語法 {filter:filpv}
e.FlipH, FlipV 濾鏡
FlipH 濾鏡實現水平反轉 FlipH 濾鏡語法 {filter:filph}
FlipV 濾鏡實現垂直反轉
FlipV 濾鏡語法 {filter:filpv}
f.Glow 濾鏡
對一個對象使用"glow"屬性後,這個對象的邊緣就會產生類似發光的效果。
Glow 濾鏡語法 {filter:glow(color=color,strength)}
參數含義如下:
參數 說明
Color 指定發光的顏色
STRENGTH 強度,值爲1到255之間的任何整數,指定發光色力度和範圍。
g.Gray ,Invert,Xray 濾鏡
使用Gray濾鏡可以把一張圖片變成灰度圖,語法很簡單:
Gray 濾鏡語法 {filter:gray}
h.Gray ,Invert,Xray 濾鏡
使用Gray濾鏡可以把一張圖片變成灰度圖,語法很簡單:
Gray 濾鏡語法 {filter:gray}
i.Mask 濾鏡
Mask 濾鏡語法 {filter:mask(color=color)}
使用"MASK"屬性可以爲對象建立一個覆蓋於表面的膜,其效果就象戴着有色眼鏡看物體一樣 。
j.
Light 濾鏡
Light 濾鏡語法 {filter:light}
這個屬性模擬光源的投射效果。一旦爲對象定義了“LIGHT"濾鏡屬性,那麼就可以調用它的“方法(Method)"來設置或者改變屬性。“LIGHT"可用的方法有:
參數 說明
AddAmbient 加入包圍的光源
AddCone 加入錐形光源
AddPoint 加入點光源
Changcolor 改變光的顏色
Changstrength 改變光源的強度
Clear 清除所有的光源
MoveLight 移動光源
k.Shadow 濾鏡
Shadow 濾鏡
語法 {filter:shadow(color=color,direction=direction)}
利用“Shadow”屬性可以在指定的方向建立物體的投影,COLOR是投影色,DIRECTION是設置投影的方向。其中0度代表垂直向上,然後每45度爲一個單位。它的默認值是向左的270度。
l.
Wave 濾鏡
Wave 濾鏡
語法 {filter:wave(add=add,freq=freq,
lightstrength=strength,
phase=phase,strength=strength)}
參數 說明
wave 把對象按垂直的波形樣式打亂。
默認是 TRUE(非0)
ADD 是否要把對象按照波形樣式打亂
FREQ 波紋的頻率,也就是指定在對象上一共需要產生多少個完整的波紋
LIGHTSTRENGTH 可以對於波紋增強光影的效果,範圍0----100
PHASE 設置正弦波的偏移量
STRENGTH 振幅大小
m.Gray ,Invert,Xray 濾鏡
使用Gray濾鏡可以把一張圖片變成灰度圖,語法很簡單:
Gray 濾鏡語法 {filter:gray}