不透明度css alpha屬性

2012/11/24 19:24:40作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

不透明度css alpha屬性

alpha濾鏡用于設(shè)置圖片或文字的不透明度。它是把一個(gè)目標(biāo)元素與背景混合，通俗地說就是一個(gè)元素的透明度。通過指定坐標(biāo)，可以指定點(diǎn)、線、面的透明度。

【基本語法】

filter：alpha (參數(shù)1=參數(shù)值，參數(shù)2=參數(shù)值，···)

【語法介紹】

alpha濾鏡包括很多參數(shù)，如表所示。

alpha濾鏡的參數(shù)
參數(shù)                  描述
opacity                設(shè)置對象的不透明度，取值范圍為0～100，默認(rèn)值為0，即完全透明，100為完全不透明
finishopacity      可選項(xiàng)，設(shè)置對象透明漸變的結(jié)束透明度。取值范圍為0～100
style                    參數(shù)指定了透明區(qū)域形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形
startx                   設(shè)置透明漸變開始點(diǎn)的水平坐標(biāo)。其數(shù)值作為對象寬度的百分比值處理，默認(rèn)值為0
starty                   設(shè)置透明漸變開始點(diǎn)的垂直坐標(biāo)
finishx                 設(shè)置透明漸變結(jié)束點(diǎn)的水平坐標(biāo)
sinishy                設(shè)置透明漸變結(jié)束點(diǎn)的垂直坐標(biāo)
opacity                設(shè)置對象的不透明度，取值范圍為O～100，默認(rèn)值為0，即完全透明，100為完全不透明

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<style type="text/css">
.g {filter: Alpha(Opacity=100);}
.g1 {filter: Alpha(Opacity=70);}
.g2 {filter: Alpha(Opacity=60);}
.g3 {filter: Alpha(Opacity=35);}
</style>
<body>
<table width="800" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td class="g"><img src="1.jpg" width="363" height="319" /></td>
    <td class="g1"><img src="1.jpg" width="363" height="319" /></td>
  </tr>
  <tr>
    <td class="g2"><img src="1.jpg" width="363" height="319" /></td>
    <td class="g3"><img src="1.jpg" width="363" height="319" /></td>
  </tr>
</table>
</body>
</html>

【代碼分析】

在代碼中，加粗部分的標(biāo)記用來設(shè)置不透明度，圖片1將不透明度設(shè)置為100，圖片2將不透明設(shè)置為70，圖片3將不透明度設(shè)置為60，圖片4將不透明度設(shè)置為35，在瀏覽器中預(yù)覽效果，如圖所示。

不透明度alpha運(yùn)行效果