css3的設置顏色透明度的筆記

1.transparent的用法：在color、border-color、background的場景，意思爲透明。只會是元素的背景色爲透明的，元素裏面的其餘元素或內容都沒有影響。

例子：

<div class="box">
        <p>111111</p>
    </div>

.box{
            width: 200px;
            height: 200px;
            background: transparent; /*設置不透明度，背景發生改變,字體不變*/
            color: red;  /*字體顏色*/
 }

2.opacity的用法：設置元素的不透明級別，從 0.0 （徹底透明）到 1.0（徹底不透明） 在使用opacity時，不只使得元素的背景透明，連其子元素和內容都會變透明。也就是說背景和字體顏色同時發生改變。

例子:

<div class="box">
        <p>111111</p>
 </div>

.box{
            width: 200px;
            height: 200px;
            background: green;  /*背景顏色*/
            opacity: .5; /*設置不透明度，背景和字體顏色也發生改變*/
            color: red;  /*字體顏色*/
 }

3.rgba是表明Red（紅色） Green（綠色） Blue（藍色）和 Alpha（不透明度）三個單詞的縮寫。RGBA 顏色值是 RGB 顏色值的擴展，帶有一個 alpha 通道 - 它規定了對象的不透明度。這裏僅僅是背景透明瞭，框內的文字並無繼承該屬性。也就是說設置不透明度，背景發生改變,字體不變。

例子：

<div class="box">
        <p>111111</p>
  </div>

.box{             width: 200px;             height: 200px;             background: rgba(100,150,200,.5); /*設置不透明度，背景發生改變,字體不變*/             color: red;  /*字體顏色*/  }