rgba()和opacity都能實現透明效果，但最大的不同是：

opacity作用于元素，以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或其背景色。設置rgba透明的元素的子元素不會繼承透明效果

比如，我們寫透明的黑色部分都是用opcity（0.5），但這帶出來一個問題就是如果你在這一div上寫字的話，然后那個字體也會變成透明色。所以我們采取rgba的樣式寫，前面三個數字分別對應r,g,b,的三種顏色，第四位的數字對應的是透明的系數。

舉例：給外面一個div紅色背景，并設置它的透明度為0,5，給里面的div顏色為綠色，并加上文字。代碼如下

    .a1 {
      width: 200px;
      height: 200px;
      background: red;
      opacity: 0.5;
    }
    .a1-rega {
      width: 200px;
      height: 200px;
      margin-top: 200px;
      background: rgba(255,0,0,0.5);
    }
    .a2 {
      width: 200px;
      height: 50px;
      background: #008000;
      font-size: 30px;
    }

  <div class="a1">
    <div class="a2">今天心情不好</div>
  </div>

  <div class="a1-rega">
    <div class="a2">今天心情不好</div>
  </div>