CSS3系列教程:RGBA

神飞发表于 11. Feb, 2009, 分类: CSS , 4 条评论 »
标签：css & css3 & RGBA

使用新的CSS3的”RGBA”声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。

RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。

浏览器兼容性

RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持，同样不需要前缀。

CSS3 RGBA 色彩

rgba

上面的效果有以下样式实现：

div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }

浏览器支持

Firefox 3.05+
Google Chrome 1.0 +
Internet Explorer 8-
Opera 9.6-
Opera 10.0+
Safari 3.2.1+

CSS3系列教程|前端观察

特别声明，本系列文章译自：Zen Elements，非常感谢Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.

Rating: 8.0/10 (1 vote cast)

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。

您或许也会喜欢：

如果你喜欢本文，欢迎订阅本站以获得本站最新内容。

前端观察

专注于网站前端设计与前端开发