這個屬性的兼容問題比較簡單，IE8已經支持這個屬性，IE6和IE7也可以通過hack支持。RGBA和CSS2里的RBG屬性差不多，只是RGBA屬性多了一個透明度的定義，CSS3標准里對RGBA屬性的解釋如下：
1 2 3 4 5 |
/* 基本語法 */em { color: Rgba(red,green,blue,opacity) }/* 舉例 */em { color: rgba(255,0,0,1) } /* 紅色，不透明 */em { color: rgba(100%,0%,0%,1) } /* 同上 */ |
在現實中，使用三個1~255的十進制數值去定義一個顏色比用百分比更加准確，下面是幾個顏色的RGB數值，大家在使用的時候只需要把00~FF的16進制數值換算成十進制就行了。
如何使用RGBA屬性
RGBA的強大之處在於，通過對透明度的定義和不同層的顏色混合可以呈現出更多的顏色，就像顏料的混合一樣。舉一個例子，我們先為頁面設置一個背景圖片，接着為頁面里的H1里的內容設置一個顏色，例如：
1 2 3 4 |
h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);} |
效果如下：
這里可以看到H1並沒有透明效果
但如果我沒對H1設置一個整體的透明度（opacity屬性）的話，效果會變成怎樣呢？
1 2 3 4 5 |
h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);opacity: 0.5;} |
在這里我們看到的效果是整個H1包括文字都呈現50%的透明度。可是文字透明是影響閱讀的，我們用RGBA屬性單獨設置H1的背景色試試。
1 2 3 4 |
h1 {color: rgb(0, 0, 0);background-color: rgba(255, 255, 255, 0.5);} |
這是我們可以看到H1的背景成50%透明的白色，但里面的文字還是不透明的黑色。當然，你也可以只讓H1里的文字透明。
1 2 3 4 |
h1 {color: rgba(0, 0, 0, 0.5);background-color: rgb(255, 255, 255);} |
只讓文字透明，可以用來創建剪紙效果。
更多用法
在任何需要設置顏色的地方都可以使用RGBA，例如：
1 2 3 4 5 |
div {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);border: 10px solid rgba(255, 255, 255, 0.3);} |
為所有div設置透明度為30%線寬為10px的白色實線邊界。
1 2 3 4 5 6 7 8 |
div {color: rgba(255, 255, 255, 0.8);background-color: rgba(142, 213, 87, 0.3);}div:hover {color: rgba(255, 255, 255, 1);background-color: rgba(142, 213,87, 0.6);} |
鼠標滑過改變透明度。
另外如果和JavaScript配合的話，RGBA屬性可以創造出更加炫目的效果。
改變你的CSS編寫習慣
在以上的例子中你可以看到作者一直在使用rgb()去指定顏色，而不使用傳統的#xxx形式的十六進制表示方法。這是一個為CSS3的RGBA屬性准備的寫法，用rgb()指定顏色可以理解為rgba()不透明，但兩者的差別非常小，這會對將來升級到rgba()帶來很大的方便。
兼容所有瀏覽器
雖然目前主流瀏覽器的最新版本都已經支持RGBA屬性，但我們還必須照顧使用舊版瀏覽器的用戶，因此在某些地方我們用老方法會保險一些。方法也有好幾種，大家按需選擇。
1.低版本不使用RGBA屬性
雖然這會影響在低版本瀏覽器里的效果，但這是最簡單的方法，也是最保險的方法，具體操作如下：
1 2 3 4 |
h1 {color: rgb(127, 127, 127);color: rgba(0, 0, 0, 0.5);} |
先設置rgb顏色在設置rgba顏色，這樣不支持rgba屬性的瀏覽器只會顯示rgb顏色，而支持rgba的瀏覽器因為重定義的作用會顯示rgba顏色。
2.使用透明的PNG圖片做背景
PNG格式的優點在於圖片里的透明特性可以在網頁里呈現出來，這里就用到了這個特點。
1 2 3 4 |
h1 {background: transparent url(black50.png);background: rgba(0, 0, 0, 0.5) none;} |
通過透明度為50%的PNG背景達到了和rgba一樣的效果。
3.IE hack
對IE6和IE7可以用IE的私用屬性來解決，可達到部分和rgba一樣的效果。
1 2 3 |
h1 {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000');} |
我們需要留意的是StartColorStr和EndColorStr的值，前兩位是十六進制的透明度，后面六位是十六進制的顏色。