CSS透明度之rgba和opacity的区别

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>