|
CSS設計濾鏡之alpha屬性
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）為線形*//
上是CSS的Alpha濾鏡屬性的應用，具體應用還需要您自己找個例子練一練。
| 
