當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

不透明度css alpha屬性

不透明度css alpha屬性

更新時間:2023-06-12 文章作者:未知 信息來源:網絡 閱讀次數:

網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

不透明度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 下載本實例相關素材及源碼

 


網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品