方法:1、為元素加上「background-color:rgba(R,G,B,A)」樣式來設定顏色透明度;2、為元素加上「opacity:透明值;」樣式來設定透明度;3、為圖像設定「filter:opacity(%);」樣式來透明度。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中設定透明度的方法有三種:
#rgba()
##opacity屬性
filter:opacity(%)
方法1:rgba ()函數
rgba()函數可以設定顏色透明度,語法如下:RGBA(R,G,B,A)取值:
半透明紅色rgba()只是單純的可以設定色彩透明度,這樣在頁面的佈局中有很多應用。比如說:讓背景出現透明效果,但上面的文字不透明。
範例:
background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明
(學習影片分享:
css影片教學方法2 :使用opacity屬性在CSS3 中,增加了一個opacity 屬性,使用此屬性可以設定元素的透明度。 opacity屬性具有繼承性,會使容器中的所有元素都具有透明度;
#語法:
opacity: value ;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>opactity</title> <style> .box1{ position:relative; width:200px;height:200px; background-color: #00f; } .box2{ position:absolute; top:80px; left:80px; width:200px; height:200px; background-color:#0f0; } .box3{ position:relative; width:200px; height:200px; background-color:#f00; z-index:1; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
#設定透明度的效果
.box1{ position:relative; width:200px;height:200px; background-color: #00f; z-index:10; opacity:0.5; } .box2{ position:absolute; top:80px; left:80px; width:200px; height:200px; background-color:#0f0; z-index:5; opacity:0.5; } .box3{ position:relative; width:200px; height:200px; background-color:#f00; z-index:1; opacity:0.5; }
表現效果:
方法3:設定
filter:opacity(%)樣式設定圖片的透明度filter屬性是將濾鏡效果套用於web頁面上的元素(主要是影像)的CSS方法;可以透過設定opacity()值,來設定影像的不透明度效果。 0%不透明度表示元素完全透明,如果不透明度為100%,則表示原始圖像。
語法:
filter: opacity(%);
範例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .opacity1 { opacity: 0.5; filter: none; } .opacity2 { opacity: 0.2; filter: none; } </style> </head> <body> <div> 正常图片:<br /><br /> <img src="1.jpg" style="max-width:90%" / alt="css怎麼用三種方法設定透明度" ></div><br /> <div> 设置透明度的图片:<br /><br /> <img class="opacity1" src="1.jpg" style="max-width:90%" / alt="css怎麼用三種方法設定透明度" > <img class="opacity2" src="1.jpg" style="max-width:90%" / alt="css怎麼用三種方法設定透明度" > </div> </body> </html>
效果圖:
更多程式相關知識,請造訪:
程式設計影片以上是css怎麼用三種方法設定透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章!