站長資訊網
方法：1、利用rgba()函數，語法為“rgba(紅色值,綠色值,藍色值,透明度值);”；2、利用opacity屬性，語法為“opacity:透明度值;”；3、利用filter屬性，語法為“filter:opacity(透明度值);”。
本教程操作環(huán)境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3透明度的設置方法
1、利用rgba() 函數使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色。
RGBA 即紅色、綠色、藍色、透明度（英語：Red, Green, Blue、Alpha）。
紅色（R）0 到 255 間的整數，代表顏色中的紅色成分。綠色（G）0 到 255 間的整數，代表顏色中的綠色成分。藍色（B）0 到 255 間的整數，代表顏色中的藍色成分。透明度（A）取值 0~1 之間， 代表透明度。
輸出結果：
2、利用opacity 屬性設置元素的不透明級別。代碼如下：
<!DOCTYPE html> <html> <head> <style> div { background-color:red; opacity:0.5; filter:Alpha(opacity=50); /* IE8 以及更早的瀏覽器 */ } </style> </head> <body> <div>本元素的不透明度是 0.5。請注意，文本和背景色都受到不透明級別的影響。</div> </body> </html>
輸出結果：
3、利用filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。代碼如下：
<!DOCTYPE html> <html> <head> <style> img { -webkit-filter:opacity(50%); /* Chrome, Safari, Opera */ filter: opacity(50%); } </style> </head> <body> <p>圖片轉為透明:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> </body> </html>
輸出結果：
（學習視頻分享：css視頻教程）
