CSS 中的顏色有三種定義方式：使用顏色方法（RGB、RGBA、HSL、HSLA），十六進制顏色值和預定義的顏色名稱。
來源于：
https://www.cnblogs.com/xiao-pang/p/5517222.html
???RGBA 是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha（不透明度）三個單詞的縮寫。RGBA 顏色值是 RGB 顏色值的擴展，帶有一個 alpha 通道 - 它規定了對象的不透明度。
基本語法:
R：紅色值。正整數 （0~255）
G：綠色值。正整數?（0~255）
B：藍色值。正整數（0~255）
A：透明度。取值0~1之間
瀏覽器的兼容性：
RGBA 顏色值得到以下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
插一句話： http://caniuse.com/ 大家可以去這個網站查找你所要用的屬性在瀏覽器中的兼容問題
???如果說 RGBA 是制作透明色，大家不由會想起 opacity 這個屬性，?opacity在我們制作背景色時經常用到。但是兩者之間到底有什么區別，那就看下面rgba和?opacity的對比實例。
HTML 代碼：
<div class="example">
<p>opacity效果</p>
<ul class="ul1">
<li class="opacity1">100%</li>
<li class="opacity2">80%</li>
<li class="opacity3">60%</li>
<li class="opacity4">40%</li>
<li class="opacity5">20%</li>
<li class="opacity6">0</li>
</ul>
<br />
<p>CSS3的rgba效果</p>
<ul class="ul2">
<li class="rgba1">1</li>
<li class="rgba2">0.8</li>
<li class="rgba3">0.6</li>
<li class="rgba4">0.4</li>
<li class="rgba5">0.2</li>
<li class="rgba6">0</li>
</ul>
</div>
Opacity樣式：
.ul1 li{
background: red;
}
li.opacity1{
opacity: 1;
}
li.opacity2{
opacity: 0.8;
}
li.opacity3{
opacity: 0.6;
}
li.opacity4{
opacity: 0.4;
}
li.opacity5{
opacity: 0.2;
}
li.opacity6{
opacity: 0;
}
注釋：IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。在這里我就不加了
RGBA樣：
li.rgba1{
background: rgba(255,0,0,1);
}
li.rgba2{
background: rgba(255,0,0,0.8);
}
li.rgba3{
background: rgba(255,0,0,0.6);
}
li.rgba4{
background: rgba(255,0,0,0.4);
}
li.rgba5{
background: rgba(255,0,0,0.2);
}
li.rgba6{
background: rgba(255,0,0,0);
}
效果圖：
效果中我們可以看出，他們相同之處就是背景色完全是一樣的，但是 ul1?后代元素會隨著一起具有透明性，所以 ul1 中的字隨著透明值下降越來越看不清楚，而 ul2 不具有這樣的問題,但是rgba在IE的兼容上不行，支持IE9+。Opacity 能實現透明，而且大多主流瀏覽器都支持，但是在 IE 下有點麻煩。
從我們上面的實例中我們也知道，RGBA 比元素設置 CSS 的透明度更好，因為單獨的顏色可以在不影響整個元素的透明度，他不會影響到元素其他的屬性，比如說邊框，字體同時也不會影響到其他元素的相關透明度。
使用 Opacity 來做透明,在父元素中使用了 Opacity，那么其垢代元素都會受其影響.
為了更好的理解我們在這里來看一個使用 Opacity 的實例。首先來看 HTML：
<div class="div1">
<div class="bg">
<p>我是bg的后代元素</p>
</div>
</div>
在給他們添加相應的樣式：
.div1 {
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的前景色也隨著變了。接著再看rgba的效果
HTML代碼：
<div class="div1">
<div class="bg">
<p>我是bg的后代元素</p>
</div>
</div>
樣式：
.bg {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0,0.5);
}
效果圖：
只要在 bg 中添加一個 background:rgba(); 就能有上面那種效果了。從上面兩個例子可以輕松的看出Opacity 與rgba 的區別
?RGBA 不單可以應用在 background 上，我們還可以應用在只要設置了顏色的地方都可以使用，在這里簡單的說一下幾種：
第一種：字體顏色
HTML：
<p class="p1">改變字體顏色</p>
<p class="p2">改變字體顏色</p>
CSS樣式：
.p1{
color: rgb(255,0,0);
}
.p2{
color: rgba(255,0,0,0.5);
}
效果圖：
設置顏色的同時可以設置透明度
第二種邊框色border-color
HTML：
<div class="div2"></div>
CSS樣式：
.div2{
width: 100px;
height: 100px;
background: red;
border: 5px solid rgba(0,0,0,0.5);
}
效果圖：
最后需要告訴大家的一點， RGBA 這種方法，目前只有在支持 RGBA 屬性的瀏覽器才能正常顯示，如果需要使用，請考慮這方面的顯示差別。
