前面我們一起探討了一下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(opaity=100);
}
li.opacity2 {
background: rgb(255,255,0);
opacity: 0.8;
filter:alpha(opaity=80);
}
li.opacity3 {
background: rgb(255,255,0);
opacity: 0.6;
filter:alpha(opaity=60);
}
li.opacity4 {
background: rgb(255,255,0);
opacity: 0.4;
filter:alpha(opaity=40);
}
li.opacity5 {
background: rgb(255,255,0);
opacity: 0.2;
filter:alpha(opaity=20);
}
li.opacity6 {
background: rgb(255,255,0);
opacity: 0;
filter:alpha(opaity=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(opaity=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(opaity=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有說過個例子，感興趣的朋友可以到這裏去看看。
這裏需要告訴大家的一點，這幾種使用rgba的方法，目前只有在支持RGBA屬性的瀏覽器才能正常顯示，如果需要使用的朋友，請考慮這方面的顯示差別。那麼到這裏關於CSS3的RGBA我就介紹完了，希望能給大家的學習帶來一定的幫助，更希望志同道合的朋友一起探討一起學習一起進步。
下面列出本站關於CSS3的其他屬性的用法：
上一節：《CSS3 Gradient》
下一節： 《CSS3的圓角border-radius》
第四節：《CSS3的文字陰影text-shadow》
第五節：《CSS3 Box-shadow》
第六節：《CSS3 Transform》
第七節：《CSS3 Transition》
第八節：《CSS3 Animation》
如需轉載請註明出處：W3CPLUS