前面我們一起探讨了一下CSS3 Gradient（css3 漸變），今天我們一起來探讨一下CSS3中的RGBA。RGB對于大家來說一點不陌生，他就是紅色R+綠色G+藍色B，那現在我們所說的RGBA又是什麼呢？說得簡單一點就是在RGB的基礎上加進了一個通道Alpha。進而形成了我們今天需要讨論的RGBA。如果需要更詳細的解說，大家就跟着我一起往下看吧。
文法:
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數| 百分數
A：透明度。取值0~1之間
取值：
<length> ：Hue(色調)。 0(或360)表示紅色，120表示綠色，240表示藍色，當然可取其他數值來确定其它顔色；
<percentage> ：Saturation(飽和度)。 取值為0%到100%之間的值；
<percentage> ：Lightness(亮度)。 取值為0%到100%之間的值；
<opacity> ：alpha(透明度)。 取值在0到1之間；
說明：
RGB色彩模式（也翻譯為“紅綠藍”，比較少用）是工業界的一種顔色标準，是通過對紅(R)、綠(G)、藍(B)三個顔色通道的變化以及它們互相之間的疊加來得到各式各樣的顔色的，RGB即是代表紅、綠、藍三個通道的顔色，這個标準幾乎包括了人類視力所能感覺的所有顔色，是目前運用最廣的顔色系統之一。
RGBA在RGB的基礎上多了控制alpha透明度的參數。以上R、G、B三個參數，正整數值的取值範圍為：0 - 255。百分數值的取值範圍為：0.0% - 100.0%。超出範圍的數值将被截至其最接近的取值極限。并非所有浏覽器都支援使用百分數值。A參數，取值在0~1之間，不可為負值。
浏覽器的相容性：
如果龐統說rgba是制作透明色（透明背景色、透明邊框色、透明前景色等），大家不由會想起opacity 這個東西。他在我們CSS2中制作背景色通常用到，可是要用他來制作邊框色或都說前景色的話，那他就隻能在邊上站着了，有心無力呀。
現在我們先來看一個rgba和opacity的對比執行個體
HTML代碼：
<div class="example-opacity">
<p>Opacity效果</p>
<ul>
<li class="opacity opacity1">100%</li>
<li class="opacity opacity2">80%</li>
<li class="opacity opacity3">60%</li>
<li class="opacity opacity4">40%</li>
<li class="opacity opacity5">20%</li>
<li class="opacity opacity6">0</li>
</ul>
<p>CSS3的RGBA效果</p>
<ul>
<li class="rgba rgba1">1</li>
<li class="rgba rgba2">0.8</li>
<li class="rgba rgba3">0.6</li>
<li class="rgba rgba4">0.4</li>
<li class="rgba rgba5">0.2</li>
<li class="rgba rgba6">0</li>
</ul>
</div>
我們分别給這兩上ul中的li應用相關樣式， 在li.opacity中我用使用CSS2中的opacity而在li.rgba中我們使用CSS3的rgba新屬性
Opacity樣式
li.opacity{
float: left;
width: 50px;
height: 50px;
}
li.opacity1 {
background: rgb(255,255,0);
opacity: 1;
filter:alpha(opacity=100);
}
li.opacity2 {
background: rgb(255,255,0);
opacity: 0.8;
filter:alpha(opacity=80);
}
li.opacity3 {
background: rgb(255,255,0);
opacity: 0.6;
filter:alpha(opacity=60);
}
li.opacity4 {
background: rgb(255,255,0);
opacity: 0.4;
filter:alpha(opacity=40);
}
li.opacity5 {
background: rgb(255,255,0);
opacity: 0.2;
filter:alpha(opacity=20);
}
li.opacity6 {
background: rgb(255,255,0);
opacity: 0;
filter:alpha(opacity=0);
}
RGBA樣式
li.rgba {
float: left;
width: 50px;
height: 50px;
}
li.rgba1 {
background: rgba(255,255,0,1);
}
li.rgba2 {
background: rgba(255,255,0,0.8);
}
li.rgba3 {
background: rgba(255,255,0,0.6);
}
li.rgba4 {
background: rgba(255,255,0,0.4);
}
li.rgba5 {
background: rgba(255,255,0,0.2);
}
li.rgba6 {
background: rgba(255,255,0,0);
}
我們來看看其效果：
效果中我們可以看出，他們相同之處就是背景色完全是一樣的，但差別就是一直讓大家覺得頭痛的問題，那就是opacity後代元素會随着一起具有透明性，是以我們Opacity中的字随着透明值下降越來越看不清楚，而RGBA不具有這樣的問題，但是其支援的浏覽器中有一個占在大市場佔有率的IE不支援，這也就是讓我們需要去做相容，（聽到相容二字大家是不是特煩，我也是的）希望IE早點能實作。
在CSS2中Opacity能實作透明，而且大多主流浏覽器都支援，雖然IE下有點麻煩
/* IE5 - 7 */
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* Everyone else */
opacity: 0.8; 那為什麼不使用opacity而要使用rgba呢
從我們上面的執行個體中我們也知道，RGBA比元素設定CSS的透明度更好，因為單獨的顔色可以在不影響整個元素的透明度，他不會影響到元素其他的屬性，比如說邊框，字型同時也不會影響到其他元素的相關透明度。
在RGBA還沒有出世前，我們都是使用opacity來做透明，但這裡存在一個問題，就是我們在父元素中使用了opacity，那麼其垢代元素都會受其影響，我想這個問題大家都有碰到過，為了解決這樣的問題我們需要增加一個空的div來專門放置使用透明的背景，然後通過使用絕對定位來實作我們需要的結果。為了更好的了解我們在這裡來看一個使用opacity的執行個體。首先來看html
<div class="bg-box">
<div class="bg">
<div class="bg-content">
<p>我是bg的後代元素，我不想我的前景有任何透明!怎麼辦?</p>
</div>
</div>
</div>
先給他們附上相應的樣式
.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg {
background: black;
opacity: 0.5;
filter:alpha(opacity=50);
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
.bg p {
padding: 5px 10px;
color: white;
} 效果：
從效果中我們明顯的看出，這裡和我們前面那個例子一樣，名叫bg的div中設定了opacity，造成其後代元素段落P的前景色也随着變了。如果需要解決這樣的問題，在不使用别的新技術下，也就是說堅持使用opacity.那麼我們就需要添加一個空的層，在這個地方應用透明背景層首先來看看改變一下html 結構吧
<div class="bg-box">
<div class="bg"> </div>
<div class="bg-content">
<p>我是bg的後代元素，我不想我的前景有任何透明!怎麼辦?</p>
</div>
</div>
現在我們需要提把bg-content和bg層重合起來，換句話說就是把透明背景層單獨放在另外一個div，然後把内容層和背景層重疊。換而言之，我們需要在bg這個div上設定透明色，而在bg-content這個div上放置内容，并且都使用定位，保證bg這個div在bg-content這個div下面。具體看看其CSS的變化：
.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg {
background: black;
opacity: 0.5;
filter:alpha(opacity=50);
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.bg-content {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.bg-content p {
padding: 5px 10px;
color: white;
} 首先我們在html中把bg這個div分離出來了，讓他和bg-content這個div變成兄弟關系，然後通過CSS把他們都定位在同一位置，隻是bg放在了bg-content的下面（z-index）控制，另外在bg的div上應用了透明。看看這樣一來我們有什麼變化，效果如下：
跟沒有處理之前相比是不是完美多了。可是這樣弄就是有一點麻煩，現在CSS3的RGBA完全可以幫大家解決這樣的問題了，接着我們在看一個用RGBA制作的效果吧，看看他是不是完全一樣的。
HTML代碼：
<div class="bg-box">
<div class="bg-content">
<p>我是bg的後代元素，我不想我的前景有任何透明!怎麼辦?</p>
</div>
</div>
我們隻要在bg-content中應用一個background:rgba();就能有上面那種效果了，具體看看代碼吧：
.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg-content {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0,0.5);
}
.bg-content p{
padding: 5px 10px;
color: white;
} 效果：
從效果的對比中我們可以明顯的看出，和opacity做出的效果是完全一樣的。但是這裡有一個問題是我們讨厭的IE（除IE9以外）都不支援CSS3的RGBA屬性。那麼這樣我們在IE下不是什麼都沒有嗎？回答是肯定的，雖然IE不支援但我們不能什麼都不給他呀，這樣一來我們就碰到一個新名詞"fallback color",它的意思是我給IE備份一個色，在不支援RGBA的情況下，我照樣給他一個色，而對rgba支援的浏覽器并不會帶來影響，那我們一起看看這個fallback color怎麼用吧。其實很簡單，我們可以給其制作一張圖檔或都隻給其加一個色，我們這些就隻加一個色吧拿前面的執行個體來說吧，我們隻要把bg-content的樣式換一下
.bg-content {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: rgb(0,0,0); /*The Fallback color*/
background: rgba(0, 0, 0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
} 這裡需要注意的是startColorStr和endColorStr的值#80000000,其中前兩位是十六進制的透明度80,也就是透明值為0.5而後面六位是十六進制的顔色#000000(black黑色)。如果你和我一樣不知道怎麼轉換這個值，你可以采用下面這個工具：
CSS背景顔色屬性值轉換 有關于這個工具的使用大家可以點選志哥的《使用IE過渡濾鏡和CSS3中的RGBA屬性完成背景色透明效果》
關于RGBA-IE-FALLBACK更多的知識可點選這裡進入.
綜合上面的所述，我們規納一個RGBA在實際應用中的模式
.rgba {
background: rgb(0,0,0); /*The Fallback color,這裡也可以使用一張圖檔來代替*/
background: rgba(0, 0, 0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
} 上面代碼中的顔色值可以根據自己的需求修改，此處隻是一個代表性的值。
我們前面簡單的帶過一句，我們rgba不單可以應用在background上，我們還可以應用在隻要設定了顔色的地方都可以使用，我在這裡簡單的說一下幾種：
第一種：前景色color
HTML
<p class="norgba-color">用rgba改變我的字型顔色</p>
<p class="rgba-color">用rgba改變我的字型顔色</p>
CSS樣式：
.norgba-color {
color: rgb(255, 0, 0);
}
.rgba-color {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0,0.5);
} 效果：
第二種邊框色border-color
HTML
<p class="norgba-border-color">用rgba改變我的邊框顔色</p>
<p class="rgba-border-color">用rgba改變我的邊框顔色</p>
CSS樣式：
.norgba-border-color {
border:5px solid rgb(255,0,0);
width: 200px;
}
.rgba-border-color {
border:5px solid rgb(255,0,0);
border:5px solid rgba(255,0,0,0.5);
width: 200px;
} 效果：
第三種：字型的陰影色text-shadow
HTML:
<p class="norgba-text-shadow">用rgba改變我的字型陰影顔色</p>
<p class="rgba-text-shadow">用rgba改變我的字型陰影顔色</p>
CSS:
.norgba-text-shadow {
text-shadow : 0 2px 1px rgb(255,0,0);
}
.rgba-text-shadow {
text-shadow : 0 2px 1px rgb(255,0,0);
text-shadow : 0 2px 1px rgba(255,0,0,0.3);
}
效果：
第四種改變邊框陰影色
HTML:
<p class="norgba-box-shadow">用rgba改變我的邊框陰影顔色</p>
<p class="rgba-box-shadow">用rgba改變我的邊框陰影顔色</p>
CSS:
.norgba-box-shadow {
border: 5px solid green;
width: 200px;
-webkit-box-shadow: 0 2px 2px rgb(255,0,0);
-moz-box-shadow: 0 2px 2px rgb(255,0,0);
box-shadow: 0 2px 2px rgb(255,0,0);
}
.rgba-box-shadow {
border: 5px solid green;
width: 200px;
-webkit-box-shadow: 0 2px 2px rgba(255,0,0,0.6);
-moz-box-shadow: 0 2px 2px rgba(255,0,0,0.6);
box-shadow: 0 2px 2px rgba(255,0,0,0.6);
} 效果:
最後一種就是漸變顔色,關于這個我就不在多說了，因為我們前面的CSS Gradient有說過個例子，感興趣的朋友可以到這裡去看看。
本文源自http://www.w3cplus.com/content/css3-rgba