在CSS3中，RGBa 為顏色宣告新增Alpha通道。這對於設計師來說是個非常好的訊息，他們現在可以在單個元素上宣告一個Alpha通道的百分比了。

對介紹不太感興趣？直接看演示吧

為什麼不是opacity?

Opacity 已經被所有主流瀏覽器所支援了，儘管要使用不同的程式碼。

/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
/* IE5 - 7 */
filter: alpha(opacity=50);  
/* Everyone else */
opacity: .5;

那麼你為什麼還要哭鼻子呢？這個問題是，如果你在一個元素上設定了opacity ，那就意味著該元素的所有子元素也會被應用同樣的設定……所以控制opacity實現非常棒的細節是頗為麻煩的事情的。你不能完全使用它，或者不得不借助於JavaScript.

RGBa前來營救

基於CSS 顏色模型第三版的RGBA 顏色允許介面設計師為獨立元素設定一個alpha通道。

RGB值被指定使用3個8位無符號整數(0 – 255)並分別代表紅色、藍色、和綠色。增加的一個alpha通道並不是一個顏色通道——它只是用來指定除其它三個通道提供的顏色資訊之外的透明度。

這樣我們就可以這樣實現：

RGBa example

使用下面的HTML

<ul>  
    <li class="hundred">100%</li>
    <li class="eighty">80%</li>
    <li class="sixty">60%</li>
    <li class="forty">40%</li>
    <li class="twenty">20%</li>
</ul>

以及CSS

ul{list-style: none}  
ul li{padding:.5em}  
ul li.hundred{background:rgba(0,0,255,1)}  
ul li.eighty{background:rgba(0,0,255,0.8)}  
ul li.sixty{background:rgba(0,0,255,0.6)}  
ul li.forty{background:rgba(0,0,255,0.4)}  
ul li.twenty{background:rgba(0,0,255,0.2)}

語法小計

CSS 2.1 開發人員可能更喜歡用16進位制色彩(例如#ccc) ，這在我的印象中，是用的最廣泛的色彩宣告。CSS2.1 支援RGB 色彩宣告，然而:

/* Hex value */
#yourid {color:#46d5de}
 /* The same as a RGB colour declaration */
#yourid {color:rgb(70,213,222)}

CSS3 RGBa 顏色採用了在語法上的一個很微小的改動:

#yourid {color:rgba(70,213,222,0.5)}

注意，瀏覽器對”color:rgb” 和”color:rgba” 是分開處理的。

瀏覽器支援

RGBa顏色現在在Webkit 和Gecko 核心的瀏覽器被支援，IE各個版本的瀏覽器和Opera還都不支援。就像Chris在他關於RGBa的精彩的文章裡 提到的，你可以使用一個標準的RGB顏色為那些不支援的瀏覽器指定一個向下相容的屬性。

div {  
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

Demo

你可以通過這個demo頁面檢視實際效果，或者通過Github下載原始碼。