RGBA是代表Red(红色)、Green(绿色)、Blue(蓝色)和Alpha(通道)。RGB值被指定使用3个8位无符号整数(0-255)来表示。alpha通道一般用作不透明度参数。当alpha数值为0时,那它就是完全透明;而数值为1时,则是完全不透明;当数值为0到1之间时,刚是半透明状态。如下例子:
html代码:
<ul> <li class="one">1</li> <li class="two">0.8</li> <li class="three">0.6</li> <li class="four">0.4</li> <li class="five">0.2</li> </ul>
css代码:
ul li{ width:200px; background-color:rgba(0,0,0,1); color:#fff; padding:5px; } .one{background-color:rgba(0,0,0,1);} .two{background-color:rgba(0,0,0,0.8);} .three{background-color:rgba(0,0,0,0.6);} .four{background-color:rgba(0,0,0,0.4);} .five{background-color:rgba(0,0,0,0.2);}
最终效果:
在任何需要设置颜色的地方都可以使用rgba,如下:
css代码:
.rect{ background:rgba(0,0,0,0.7); color:rgba(255,255,255,0.8); border:10px solid rgba(255,255,255,0.1); }
最终效果(左边是火狐浏览器,右边是谷歌浏览器,注意它们在border的交叉处表现有所不同):
RGBA与Opacity的区别:
opactiy指不透明度,它的取值范围为[0.0,1.0],特点是该元素的所有子元素会继续这个属性,并不能单独控制。而rgba可以在任何需要颜色的地方进行单独控制,而不影响其它元素。
Pingback 引用通告: css3 text-shadow文字阴影 _ 雨打浮萍