所謂RGBA顏色，顧名思意就是R+G+B+A的顏色，再具體點就是RED+GREEN+BLUE+ALPHA的顏色，小寫一下就是red+green+blue+alpha的顏色，翻譯一下就是紅+綠+藍+Alpha透明的顏色。
我們平時用的較多的是16進制顏色，例如黑色#000000;白色#FFFFFF，這些是16進制表示的顏色，如果使用RGB顏色表示就是 rgb(0, 0, 0)與rgb(255,255,255)，其實本質上是一樣的，只是一個是16進制表示的，一個是二進制表示的(RGB顏色)。
而RGBA顏色歸為CSS3屬性，其余RGB的區別在于多了個A，也就是Alpha透明度，這是個很好的東西啊，我們以后要實現半透明效果（無論是 背景，邊框，文字顏色等都可以用半透明實現了），但是，一向不緊不慢，孤芳自賞的IE家族，目前為止還不支持rgba顏色，真是讓人哀嘆??！
您可以參見下面各個瀏覽器對rgba的支持情況一覽表，這個表不是我做的，里面把瀏覽器的祖宗十八代都挖出來了，不得不佩服圖表制作者，一些跟鳳姐一樣稀奇古怪的瀏覽器可以直接忽略掉：
| 瀏覽器、版本、平臺 | 結果 | 后備 |
|---|---|---|
| Firefox 3.6 (OS X) | 作用 | — |
| Firefox 3.0.5 (OS X) | 作用 | — |
| Firefox 3.0.5 (Windows XP, Vista) | 作用 | — |
| Firefox 2.0.0.18 (PC) | 無作用 | 實色 |
| Safari 4 (Developer Preview & 4.0.4, OS X) | 作用 | — |
| Safari 3.2.1 (OS X, Windows XP) | 作用 | — |
| Mobile Safari (iPhone) | 作用 | — |
| Opera 9.6.1 | 無作用 | 實色 |
| Opera 10 Beta (Linux & Windows) | 作用 | — |
| Opera 10.10 (OS X) | 作用 | — |
| IE 4.01 | 無作用 | 沒有顏色 |
| IE 5.5 (PC via IETester) | 無作用 | 沒有顏色 |
| IE 6 (PC via IETester) | 無作用 | 實色 |
| IE 7 | 無作用 | 實色 |
| IE 8 (Beta 2 & release version) | 無作用 | 實色 |
| Google Chrome 0.4.154.33 (Windows XP) | 作用 | — |
| Google Chrome 1.0.154.46 (Windows XP) | 作用 | — |
| Google Chrome 4.0.249.49 (OS X) | 作用 | — |
| Netscape 4.8 (PC) | 無作用 | 沒有顏色 |
| Navigator 9.0.0.5 Linus | 無作用 | 實色 |
| SeaMonkey 1.1.14 | 無作用 | 沒有顏色 |
| SeaMonkey 2.0 | 作用 | — |
| Sunrise 1.7.5 | 作用 | — |
| Stainless 0.2.5 | 作用 | — |
| Flock 1.2.7 | 無作用 | 實色 |
| Flock 2.0.2 | 作用 | — |
| BlackBerry Storm Browser | 作用 | — |
| Camino 1.6.6 | 無作用 | 實色 |
| Camino 2.0b1 | 作用 | — |
| Iceape 1.1.14 (Linux) | 無作用 | 實色 |
| Kazehakase 0.5.2 (Linux) | 無作用 | 實色 |
| Avant 11.7 (Windows XP) | 無作用 | 實色 |
對于rgba的使用，您可以參見下面的簡單示例：
background:rgba(200, 54, 54, 0.5);
其中，表示半透明度的0.5前面的0是可以省掉的，直接.5也是可以的。
正如上表所展示的，IE8及其以下都對實用的rgba顏色不支持，怎么半呢？
其實細想一下，rgba顏色多了個什么東西呢，不就是半透明嗎，IE不是由半透明濾鏡嘛，我們只要使用：
filter:alpha(opacity=50);
不也很ok嗎？
是嗎？只要靜下來一想，完全不是那么回事，IE半透明濾鏡透明的是整個元素，它可以只透明元素的邊框嗎？它可以只透明文字的投影嗎？都不行。
正所謂車到山前必有路，IE下某一屬性是可以實現類似于rgba的效果的，那就是半透明背景。
IE下背景半透明的方案
實現IE下僅僅背景色的半透明沒有什么玄乎的，就是IE濾鏡，準確的講是IE漸變濾鏡。關于IE漸變濾鏡，我曾在“CSS實現兼容性的漸變背景(gradient)效果”一文中有過一些介紹，但是不是很全。
這里可以稍微在補充下下：
此濾鏡上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最簡單的使用如下：
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)
startColorStr:可選項。字符串(String)。設置或檢索色彩漸變的開始顏色和透明度。
其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數。取值范圍為 00 – FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復為默認值。
取值范圍為 #FF000000 – #FFFFFFFF 。默認值為 #FF0000FF 。不透明藍色。
EndColorStr:可選項。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。
此濾鏡還有諸如Enabled參數和GradientType參數，具體含義不是本文重點，掠過~~
我們關心的是這里的顏色表示，即#AARRGGBB，看到這里前面的兩個AA字母沒，這個AA不是指吃飯K歌的AA，而 是指rgba中的那個a，也就是透明度的意思，只是與rgba不同的是，這里的AA是要用16進制表示的（非小數值），也就是從00~FF，00表示完全 透明了，FF則相當于rgba中1，表示完全不透明實色一個。
好了，現在這個買賣好做了，就像雖然閆鳳嬌和阿嬌長相差異很大，但是都是很清純的女生，于是呢，我們就可以實現兼容性，實現統一了。
rgba+filter實現兼容性的半透明背景效果
參見如下的示例代碼：
background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
上面代碼所實現的效果是讓所有主流瀏覽器下元素可以實現50%透明的黑色背景。類似下面的效果：
實際的應用
如果能夠直接實現兼容性的背景色，那么很多事情就好辦了。例如我們要實現兼容性的半透明邊框，就不需要上下左右拼湊了，最好的例子莫過于jQuery的boxy彈出層效果了。
看到上面的黑色的半透明邊框沒，由于兼容性的問題，這里的圓角黑色半透明邊框是怎么實現的呢？是四角的圖片+四邊的opacity半透明拼接實現的，不可不謂消耗巨大。
其實，一切都可以很輕松的。應用本文所敘述的半透明背景色方法，加上一點漸進增強，我們來看看如果最高效的實現黑色半透明邊框，如下代碼：
.opacity_bg_box{
background:rgba(0,0,0,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
padding:8px;
position:absolute;
top:20px;
}
.opacity_in_box{
border:1px solid #f0f3f9;
background:white;
font-size:0;
}
對于HTML代碼如下：
<div class="opacity_bg_box">
<div class="opacity_in_box">
<img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm13.jpg" />
</div>
</div>
結果如下圖所示：
結語
雖然IE濾鏡這個東西盡量避免實現，但是在有些特殊情況下，權衡下來，此處的方法還是有一定的使用價值的。如果一切都是我做主，我可能就會讓IE瀏 覽器直接實色表示了，畢竟，主要的功能沒有多大影響，其次，實色也是蠻好看的，權衡利弊，IE的表現稍遜一點反而是上佳選擇，當然，這只是我個人的看法， 每個人的經歷，關注的領域，以及經驗的不同會導致對問題看法的不同，您可能不認為如此。好了，就這么多，我確實累的不行了，女人太煩了真是麻煩~~~
鄂公網安備 42090202000212號