css3濾鏡-通道(Alpha)濾鏡
阿新 • • 發佈：2019-01-20
<!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>