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 屬性的瀏覽器才能正常顯示，如果需要使用，請考慮這方面的顯示差別。