站長(zhǎng)資訊網(wǎng)在html中，如果是背景顏色，可以利用rgba()函數(shù)或者opacity屬性來(lái)設(shè)置顏色透明度；如果是背景圖片，可以利用opacity屬性和“filter:opacity(%)”樣式來(lái)設(shè)置圖片透明度。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、設(shè)置背景顏色的透明度–利用rgba()函數(shù)或者opacity屬性
示例1：
<style> #p1 {background-color:rgb(255,0,0,0.3);} #p2 {background-color:rgb(0,255,0,0.3);} #p3 {background-color:rgb(0,0,255,0.3);} #p4 {background-color:rgb(192,192,192,0.3);} #p5 {background-color:rgb(255,255,0,0.3);} #p6 {background-color:rgb(255,0,255,0.3);} </style> </head> <body> <p>RGB 顏色，并使用透明度:</p> <p id="p1">紅色</p> <p id="p2">綠色</p> <p id="p3">藍(lán)色</p> <p id="p4">灰色</p> <p id="p5">黃色</p> <p id="p6">櫻桃色</p> </body>
效果圖：
示例2：
<style> .demo{ width: 280px; height: 140px; margin: 50px auto; } .demo1,.demo2{ width: 120px; height: 120px; margin: 10px; float: left; background:#2DC4CB; } .demo1{ opacity:1; } .demo2{ opacity:0.5; } </style> </head> <body> <div class="demo"> <div class="demo1"> <p>背景色不透明，文字不透明！</p> </div> <div class="demo2"> <p>背景色透明，文字也透明！</p> </div> </div> </body>
效果圖：
2、設(shè)置背景圖片透明度–使用opacity屬性和“filter:opacity(%)”樣式
示例1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 300px; height: 200px; background-image: url(img/1.jpg); background-size: 300px; } .div1{ -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */ filter: opacity(50%); } .div2{ -webkit-filter: opacity(20%); /* Chrome, Safari, Opera */ filter: opacity(20%); } </style> </head> <body> <div> <p>原圖：</p> </div> <div class="div1"> <p>透明度為50%：</p> </div> <div class="div2"> <p>透明度為20%：</p> </div> </body> </html>
示例2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 300px; height: 200px; background-image: url(img/1.jpg); background-size: 300px; } .div1{ opacity: 0.5; } .div2{ opacity: 0.2; } </style> </head> <body> <div> <p>原圖：</p> </div> <div class="div1"> <p>透透明度為0.5：</p> </div> <div class="div2"> <p>透明度為02：</p> </div> </body> </html>
（學(xué)習(xí)視頻分享：css視頻教程、《html視頻教程》）
