在css3之前，在樣式中指定的顏色值只能為RGB顏色值，並且只能通過opacity屬性來設置元素的透明度。CSS3中增加了3種顏色值-RGBA顏色值，HSL顏色值及HSLA顏色值，並且允許通過對RGBA顏色值和HSLA顏色值設定alpha通道的方法來更加容易地實現將半透明文字與圖像互相重疊的效果。
alpha通道與opacity屬性的區別
opacity屬性時css中專門用來指定透明度的一個屬性，取值范圍也在0-1之間，0表示完全透明，1表示不透明。使用alpha通道對元素設定透明度時，可以單獨針對元素的背景色和文字顏色等來指定透明度，而opacity屬性只能指定整個元素的透明度。
但alpha通道與opacity屬性並不兼容ie9以下的版本，以下為本人利用濾鏡等方式解決了此問題，兼容各個版本。
RGBA方法（兼容各個版本）
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>RGBa 與 opacity 效果的區別</title>
<!--以下為通用浏覽器的寫法-->
<style type="text/css">
.main{ background:#000; width:300px; height:300px; }
.main-1{ background:rgb(255,255,255); background:rgba(255,255,255,0.2);width:300px; height:50px; }
</style>
<!--以下為針對ie浏覽器的寫法-->
<!--[if IE]>
<style type="text/css">
.main-1{
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20ffffff', endColorstr='#20ffffff');
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<div class="main"><div class="main-1"></div></div>
</body>
</html>
opacity方法（兼容各個版本）
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>RGBa 與 opacity 效果的區別</title>
<style type="text/css">
.main{ background:#000; width:300px; height:300px; }
.main-1{ background:#fff; filter:alpha(opacity=20);opacity:0.2;width:300px; height:50px; }
</style>
</head>
<body>
<div class="main"><div class="main-1"></div></div>
</body>
</html>