方法：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;支持完全透明
在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;
}表現效果：
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中文網其他相關文章！
