您的位置：首页 > Web前端 > CSS

css3滤镜-通道(Alpha)滤镜

2016-05-03 20:21 537 查看
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>通道(Alpha)滤镜</title>

</head>

<body style="background-color: black;">

<h1>通道(Alpha)滤镜应用于图片</h1>

<ul>其相关参数包括:

<li>1.enabled:设置滤镜是否激活</li>

<li>2.style:设置透明渐变的样式,渐变显示的形状,取值为0-3,0表示无渐变,1表示线性渐变,2表示圆形渐变,3表示矩形渐变</li>

<li>3.opacity:透明度,0-100,0表示完全透明,100表示完全不透明</li>

<li>4.finishOpacity:设置结束时的透明度</li>

<li>5.startx:设置透明渐变开始点的水平坐标</li>

<li>6.starty:设置透明渐变开始点的垂直坐标</li>

<li>7.finishx:结束点的水平坐标</li>

<li>8.finishy:结束点的y坐标</li>

</ul>

<ul>相关实例：

原始图：<img src="img/11.jpg" alt="图片" title="图片" style="width:200px;height:160px;">

style=0:<img src="img/11.jpg" style="width:200px;height:160px;filter:Alpha(opacity=60,style=0) ;-webkit-filter:opacity(0.6);filter:opacity(0.6);">

style=1:<img src="img/11.jpg" style="width:200px;height:160px;filter:Alpha(opacity=60,style=1);-webkit-filter:opacity(0.3);filter:opacity(0.3);"/>

style=2:<img src="img/11.jpg" style="width:200px;height:160px;filter:Alpha(opacity=60,style=2);-webkit-filter:opacity(1);filter:opacity(1);"/>

</ul>

<h1>Alpha应用于文字透明效果</h1>

<div>

<p style="color:yellow;font-size:20px;width:100%">Alpha滤镜</p>

<p style="color:yellow;font-size:20px;width:100%;filter:Alpha(opacity=60,style=1);-webkit-filter:opacity(0.6);filter:opacity(0.6);">透明效果</p>

<p style="color:yellow;font-size:20px;width:100%;filter:Alpha(opacity=60,style=2);filter:opacity(0.3);-webkit-filter:opacity(0.3);">透明效果</p>

<p style="color:yellow;font-size:20px;width:100%;filter:Alpha(opacity=60,style=3);-webkit-filter:opacity(0);filter:opacity(0);">透明效果</p>

<p style="color:yellow;font-size:20px;width:100%;filter:Alpha(opacity=20,style=1);-webkit-filter:opacity(0.3);filter:opacity(0.3);">透明效果</p>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航