您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS濾鏡:alpha屬性

CSS濾鏡:alpha屬性

文章來源：365jz.com 點擊數(shù)：192 更新時間：2008-04-25 11:55 參與評論

alpha是來設置透明度的。先來看一下它的表達格式：

　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）

　　哇，怎么這么長。是啊，不過這些參數(shù)都各有其用。
　　Opacity代表透明度等級，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀；1代表線形；2代表放射狀；3代表長方形。
　　Finishopacity是一個可選項，用來設置結(jié)束時的透明度，從而達到一種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開始坐標，finishX和finishY代表漸變透明效果的結(jié)束坐標。
　　從上面講的我們可以看出，如果不設置透明漸變效果，那么只需設置opacity這一個參數(shù)就可以了。說了這么多，我們來看一個實例吧（見下圖）：

　　實現(xiàn)上面這種效果的代碼如下：

<html>
　　<head>
　　<title>alpha</title>
　　<style>//*定義CSS樣式*//
　　
　　</style>
　　</head>
　　<body>
　　<div>
　　<p style=“font-size：48；font-weight：bold；color：red；”>
　　Beautiful </p>//*定義字體屬性，前景色為紅色*//
　　</div>
　　<p><img src=“ss01076.jpg”> </p>
　　//*導入一張圖片*//
　　</body>
　　</html>

　　如果在上面的代碼中稍做改動，則將產(chǎn)生另外多種效果。我們只修改img的樣式屬性，把head中的Img樣式屬性代碼改為如下所示：

　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*設置透明漸變效果，起始坐標，終止?jié)u變坐標，并設置透明樣式值（style=1）為　　　線形*//

　　這段代碼產(chǎn)生的效果如左下圖所示，右面的兩幅圖分別是把Alpha中的Style參數(shù)值為2和3后的效果，點擊縮略圖可放大。