CSS特效之透明 rgba

rgba

語法

R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數| 百分數
A：透明度。取值0~1之間

說明

RGBA在RGB的基礎上多了控制alpha透明度的參數。以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支持使用百分數值。A參數，取值在0~1之間，不可爲負值。

純色不透明

1. .rgba-1{ width:50px; height:50px; background:rgb(255,0,0); }

不透明度0.8

1. .rgba-2{ width:50px; height:50px; background:rgba(255,0,0,.8); }

不透明度0.6

1. .rgba-3{ width:50px; height:50px; background:rgba(255,0,0,.6); }

不透明度0.4

1. .rgba-2{ width:50px; height:50px; background:rgba(255,0,0,.4); }

不透明度0.2

1. .rgba-3{ width:50px; height:50px; background:rgba(255,0,0,.2); }

不透明度0 完全透明

1. .rgba-3{ width:50px; height:50px; background:rgba(255,0,0,0); border:1px solid #ccc;/*加邊框看得清楚*/ }

對比

• 1
• 0.8
• 0.6
• 0.4
• 0.2
• 0