<!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>
<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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
