執行個體詳解CSS濾鏡(12)alpha屬性
來源:互聯網
上載者:User
alpha是來設定透明度的。先來看一下它的表達格式:
filter:alpha(opacity=opcity,finishopacity=finishopacity,
style=style,startX=startX,startY=startY,finishX=finishX,
finishY=finishY)
哇,怎麼這麼長。是啊,不過這些參數都各有其用。
Opacity代表透明度等級,可選值從0到100,0代表完全透明,100代表完全不透明。
Style參數指定了透明地區的形狀特徵。其中0代表統一形狀;1代表線形;2代表放射狀;3代表長方形。
Finishopacity是一個可選項,用來設定結束時的透明度,從而達到一種漸層效果,它的值也是從0到100。
StartX和StartY代表漸層透明效果的開始座標,finishX和finishY代表漸層透明效果的結束座標。
從上面講的我們可以看出,如果不設定透明漸層效果,那麼只需設定opacity這一個參數就可以了。說了這麼多,我們來看一個執行個體吧(見下圖):
實現上面這種效果的代碼如下:
<html>
<head>
<title>alpha</title>
<style>//*定義CSS樣式*//
<!--
div{position:absolute; left:50;top:70; width:150; }
//*定義DIV地區內的樣式(位置為絕對位置,left、top、width的座標)*//
img{position:absolute;top:20;left:40;
filter:alpha(opacity=80)}
//*定義圖片的樣式,絕對位置,濾鏡屬性是透明度為80*//
-->
</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>
如果在上面的代碼中稍做改動,則將產生另外多種效果。我們只修改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);}
//*設定透明漸層效果,起始座標,終止漸層座標,並設定透明樣式值(style=1)為 線形*//
這段代碼產生的效果如左下圖所示,右面的兩幅圖分別是把Alpha中的Style參數值為2和3後的效果,點擊縮圖可放大。
以上是CSS的Alpha濾鏡屬性的應用,具體應用還需要您自己找個例子練一練。