在CSS中有一個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坐標。 只能style = 1才有效
starty 漸變透明效果開始處的 Y坐標。 只能style = 1才有效
finishx 漸變透明效果結束處的 X坐標。 只能style = 1才有效
finishy 漸變透明效果結束處的 Y坐標。 只能style = 1才有效
以上的參數可以選用,可以只設置一個opacity
實例:
<html>
<head>
<title>alpha效果展示:</title>
<style type="text/Css"> //*定義CSS樣式*//
.half{filter:alpha(opacity=50)} //*透明度50,默認形狀*//
.s0{filter:alpha(opacity=30,style=0)} //*透明度30,統一形狀*//
.s1{filter:alpha(opacity=80,style=1)} //*透明度80,線性透明*//
.s2{filter:alpha(opacity=80,style=2)} //*透明度80,放射性*//
.s3{filter:alpha(opacity=80,style=3)} //*透明度80,長方形*// </style>
</head>
<body>
<img src="Sunset.jpg">
<img class=half src="Sunset.jpg">
<img class=s0 src="Sunset.jpg">
<img class=s1 src="Sunset.jpg">
<img class=s2 src="Sunset.jpg">
<img class=s3 src="Sunset.jpg">
</body>
</html>
注意:在濾鏡屬性中,每個參數之間使用英文的逗號(,)分隔開,交換各個參數的位置,並不影響濾鏡的顯示效果。