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>

注意:在滤镜属性中,每个参数之间使用英文的逗号(,)分隔开,交换各个参数的位置,并不影响滤镜的显示效果。

转载于:https://www.cnblogs.com/fpliu/p/3824747.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值