国内最全IT社区平台联系我们 | 收藏本站

华晨云

阿里云优惠2

您当前位置：首页 > web前端 > htmlcss > CSS3 RGBA 属性高级用法

CSS3 RGBA 属性高级用法

来源：程序员人生发布时间：2014-03-19 05:41:34 阅读次数：2502次

貌似最近网上对CSS3的讨论真的很火，现在讲一下CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单，IE8已经支持这个属性，IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多，只是RGBA属性多了一个透明度的定义，CSS3标准里对RGBA属性的解释如下：

/* 基本语法 */
em { color: Rgba(red,green,blue,opacity) }
/* 举例 */
em { color: rgba(255,0,0,1) } /* 红色，不透明 */
em { color: rgba(100%,0%,0%,1) } /* 同上 */

在现实中，使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确，下面是几个颜色的RGB数值，大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。

RGB颜色十进制数值

如何使用RGBA属性

RGBA的强大之处在于，通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色，就像颜料的混合一样。举一个例子，我们先为页面设置一个背景图片，接着为页面里的H1里的内容设置一个颜色，例如：

h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}

效果如下：
H1没有透明效果
这里可以看到H1并没有透明效果

但如果我没对H1设置一个整体的透明度（opacity属性）的话，效果会变成怎样呢？

h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.5;
}

整个H1元素透明
在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的，我们用RGBA属性单独设置H1的背景色试试。

h1 {
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.5);
}

RGBA单独设置H1元素背景
这是我们可以看到H1的背景成50%透明的白色，但里面的文字还是不透明的黑色。当然，你也可以只让H1里的文字透明。

h1 {
color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}

RGBA只让H1里的文字透明
只让文字透明，可以用来创建剪纸效果。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

程序员人生

------分隔线----------------------------

上一篇 Javascript属性：addEvent()用法浅析

下一篇 CSS实例教程：教你如何定位（组图）

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点

程序员人生