网络编程
位置:首页>> 网络编程>> 网页设计>> 用CSS3将你的设计带入下个高度[译](4)

用CSS3将你的设计带入下个高度[译](4)

作者:神采飞扬 来源:前端观察 发布时间:2009-06-22 13:03:00 

标签:设计,css3,hack,工具

2. RGBA和透明度

RGBA 让你可以不仅仅设定色彩,还能设定元素的透明度。一些浏览器尚不支持它,所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

Tim Van Damme在链接的hover效果上使用了RGBA

在这个网站上,Tim Van Damme在鼠标悬停效果上使用了RGBa;例如,在他的首页的network链接上:

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

当设定一个RGBA 色彩的时候,我们必须依次设定红、蓝、和绿色的值,可以是0-255或百分数。透明值应该在0.0到1.0之间,例如0.5 代表50% 的透明度。

RGBA 和opacity 之间的不同是前者只会应用到指定的元素上,而后者会影响我们指定的元素及其子元素。

这里有个例子展示我们如何给一个div添加80% 透明:

div {
 opacity: 0.8;
 }

浏览器支持: RGBA 被Webkit内核浏览器支持。IE所有版本都不支持。Firefox 2也不支持,但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的浏览器支持。IE所有版本同样不支持。IE只支持自家的该死的滤镜(filter)

扩展阅读:

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com