1. 程式人生 > >CSS濾鏡實現火狐、IE相容

CSS濾鏡實現火狐、IE相容

用於定製圖片的顯示效果

1)濾鏡的有效HTML標記:

BODY

BUTTON  

DIV    

IMG  

INPUT  

MARQUEE   

SPAN   

TABLE   

TD   

TEXTAREA   

TH  

TR

2)濾鏡的屬性引數

a)設定透明度Alpha

語法: { FILTER: Alpha(Opacity=n1,Finishopacity=n2,Style=#,Startx=x1,Starty=y1,Finishx=x2,Finishy=y2)}
"Opacity"
透明度.0100,0代表完全透明.100代表完全不透明.
"Finishopacity"
可選,指定結束時的透明度

.0100.
"Style"
透明區域形狀.其中#可為:0代表統一形狀,1線形,2放射狀,3長方形.
"Startx"
"Starty"漸變透明效果的開始XY座標.
"Finsihx"
"Finsihy"漸變透明效果結束XY的座標.
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

b)模糊Blur   

語法:{filter:blur(add=add,direction=direction,strength=strength)}
"add""TRUE(
預設)"或者"FALSE".指定圖片是否被改變成印象派的模糊效果.1為真,0為假
"direction"

設定模糊的方向.0垂直向上,45度為一個單位.預設值向左的270.
"strength"
有多少畫素的寬度受到模糊影響,預設是5個畫素.

c)透明Chroma  

把指定的顏色設定為透明語法: {filter:chroma(color=color)}

COLOR,設定為透明色的顏色的值

舉例:

<img style="filter:chroma(color=white)" src="圖片" width="26" height="15" >

d)投射陰影DropShadow

語法: {filter:Dropshadow(Color=color,Offx=x,Offy=y,positive=positive)}
"Color"

陰影顏色
"Offx"
"Offy"X方向和Y方向陰影的偏移量.
"Positive"
如果為"True"為任何的非透明畫素建立可見的投影.如果為"False",為透明的畫素部分建立可見的投影.

e)翻轉FlipH, FlipV

語法:{filter: FlipH} ,{filter: FlipV}

分別是將物件水平反轉和垂直反轉

f)物件的外邊界增加光效Glow

語法:{filter:Glow(Color=color,Strength=n)}

"Color"發光色
"Strength"
強度從1255

g)圖象色彩轉換

Gray灰度   Invert反色   Xray映出圖象輪廓並把這些輪廓加亮(X光效果,灰度後反色)語法: {filter:gray} {filter:invert} {filter:xray}

h)陰影效果Shadow

語法: {filter:shadow(Color=color,Direction=direction)}
Color
投影色
Direction
投影.0度垂直向上,然後每45度為一個單位.預設值是向左的270.

i)正弦波紋Wave

X軸和Y軸方向利用正弦波紋打亂圖片

語法: {filter:wave(Add=True/False,Freq=n,Lightstrength=n1,Phase=n2,Strength=n3)}
"Add"
是否打亂,預設是"True".
"Freq"
產生多少個完整的波紋.
"LightStrength"
增強光影,0-100的整數值.
"Phase"
正弦波的偏移量,通常值為0,範圍是0-100的整數值
"Strength"
代表振幅大小.