當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > DIV+CSS > 不透明度css alpha屬性

不透明度css alpha屬性

2012/11/24 19:24:40作者：佚名來源：網絡

移動端

【實例介紹】

不透明度css alpha屬性

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

【基本語法】

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

【語法介紹】

alpha濾鏡包括很多參數，如表所示。

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

【實例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</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>

【代碼分析】

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

不透明度alpha運行效果

【素材及源碼下載】

請點擊：不透明度alpha 下載本實例相關素材及源碼

標簽：

上一篇：背景圖片定位css background-position屬性
下一篇：CSS濾鏡blur屬性

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频