CSS3：RGBA的使用方法

1.說明

此色彩模式與RGB相同，只是在RGB模式上新增了Alpha透明度。

RGBA(R,G,B,A)

2.取值

R：

紅色值，正整數值的取值範圍爲：0 - 255，百分數值的取值範圍爲：0.0% - 100.0%。

G：

綠色值，正整數值的取值範圍爲：0 - 255，百分數值的取值範圍爲：0.0% - 100.0%。

B：

藍色值，正整數值的取值範圍爲：0 - 255，百分數值的取值範圍爲：0.0% - 100.0%。

A：

Alpha透明度。取值0~1之間。

3.示例

rgba

<ul>
    <li style="background:rgba(165, 42 ,42, 1)">100%</li>
    <li style="background:rgba(165, 42 ,42, 0.5)">50%</li>
    <li style="background:rgba(165, 42 ,42, 0.3)">30%</li>
    <li style="background:rgba(165, 42 ,42, 0.1)">10%</li>
</ul>

效果如下圖：

透明度分別爲100%，50%，30%，10%，注意字體的顏色，並沒有因爲使用了半透明而減弱。

rgba + opacity

<ul>
    <li style="background:rgb(165, 42 ,42);opacity:1">100%</li>
    <li style="background:rgb(165, 42 ,42);opacity:.5">50%</li>
    <li style="background:rgb(165, 42 ,42);opacity:.3">30%</li>
    <li style="background:rgb(165, 42 ,42);opacity:.1">10%</li>
</ul>

效果如下圖：

透明度分別爲100%，50%，30%，10%，注意字體的顏色，由於使用了opacity導致li元素內的所有子元素都半透明瞭。

4.兼容性