css 濾鏡(filter)的用法

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}

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章