CSS濾鏡之Alpha濾鏡——透明度


在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>

注意:在濾鏡屬性中,每個參數之間使用英文的逗號(,)分隔開,交換各個參數的位置,並不影響濾鏡的顯示效果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM