CSS特效之透明 rgba

rgba

语法

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间

说明

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

纯色不透明

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

不透明度0.8

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

不透明度0.6

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

不透明度0.4

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

不透明度0.2

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

不透明度0 完全透明

 
 
.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