css3 RGBA

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);}

最终效果:

css3 rgba

在任何需要设置颜色的地方都可以使用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的交叉处表现有所不同):

css3 rgba

 RGBA与Opacity的区别:

opactiy指不透明度,它的取值范围为[0.0,1.0],特点是该元素的所有子元素会继续这个属性,并不能单独控制。而rgba可以在任何需要颜色的地方进行单独控制,而不影响其它元素。


马上分享给你的朋友吧~

css3 RGBA》上有 1 条评论

  1. Pingback 引用通告: css3 text-shadow文字阴影 _ 雨打浮萍

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>