在 CSS3 中，增加了一個 opacity 屬性，允許開發者設定元素的透明度，現在 opacity 已被主流的現代瀏覽器支援，但 opacity 會把被設定的元素及其子元素同時設定為同一個透明度，這樣的透明規則相當不靈活，在實際開發中往往也是會遇到很多麻煩。其實，在 CSS3 中還有另外一套顏色透明解決方案 —— RGBa 。相對於 opacity ，RGBa 可以在單個元素上設定透明度，而不影響其子元素，只是 RGBa 的瀏覽器支援度並沒有 opacity 的廣泛，因此相對較少引起開發者注意。下面開始詳細介紹 RGBa 顏色。

一. RGBa 顏色基礎

RGBa 在本質上看也是為設定的元素增加了一個 alpha 通道，即在紅色、綠色、藍色三種顏色通道之外增加一個代表透明度的通道，其中 RGB 值使用我們熟悉的用3個 0 到 255 的整數分別表示紅色、綠色、藍色，而 alpha 取值則為 0 到 1 （小數位一位）。下面例舉一個例子說明其具體的使用方式：

在 CSS 2.1 中，支援使用 RGB 色彩宣告（儘管開發者可能更加習慣使用如：#343434 的 16 進製表示方式），例如要為 id 為 example 的 div 元素設定背景色 #343434 ，可以這樣寫

1 2	/* RGB 表示方式 */ #example {background: rgb(52, 52, 52); }

接下來再使用 RGBa ，把例子中的背景顏色修改成帶 0.5 透明度。

1 2 3 4

/* 設定 0.5 透明度 */ #example-a {background: rgba(52, 52, 52, 0.5); } /* 也可以省略小數點前的 0 */ #example-a {background: rgba(52, 52, 52, .5); }

增加透明度前後效果如下（為了更明顯的反映透明度帶來的效果，例子中的 body 增加了背景紋理）：

可以看出，RGBa 只是在原有的 RGB 的基礎上增加一個引數，這個改動雖小，卻為開發者提供了很大的方便。

另外，RGBa 除了可以用在 background 屬性外，還可以用在 color 和 border 屬性（注：border 屬性使用 RGBa 在 Firefox 中會與在其他瀏覽器中的效果略有不同）。

二. 瀏覽器支援與漸進增強

儘管 RGBa 已經在主流現代瀏覽器中獲得了良好的支援，其中 Webkit 對 RGBa 的支援是最早的，Chrome 至少在 0.415 版本便開始支援 RGBa ，在這個方面 Chrome 可以說是非常給力的，另外 Gecko 和 Presto 核心也逐步實現了對 RGBa 的支援，IE 瀏覽器則從 IE9 開始才支援 RGBa 。更具體的瀏覽器支援情況如下：

Chrome 0.4.154.33+ , Firefox 3.0+ , Safari 3.2.1+ , Opera 10.10+ , IE9+

更加詳細的瀏覽器支援情況請參考這裡。

對於不支援 RGBa 的瀏覽器，這裡可以採用漸進增強的方案解決，Kayo 推薦的是指定一個保留色的解決方案。首先，開發者必須知道，不支援 RGBa 的瀏覽器會把使用了 RGBa 的 CSS 屬性值視為語法錯誤，因此不理會該 CSS 屬性設定。因此，開發者可以在設定 RGBa 顏色之前首先設定一個不使用透明度的屬性，避免當瀏覽器不支援 RGBa 時出現完全沒有顏色的情況。下面對上例進行擴充套件說明：

1	#example1 {background: rgb(52, 52, 52); background: rgba(52, 52, 52, .5); }

不支援 RGBa 的瀏覽器會忽略第二個 background 屬性設定，按照第一個屬性值設定元素的背景色，這樣雖然不能使瀏覽器之間的效果相同，但已經達到相似的效果了，並且體現了一種不錯的漸進增強解決方案。