手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS通过RGBa将一个元素设置为透明效果
CSS通过RGBa将一个元素设置为透明效果
摘要:RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:div{background:rgba(200,54,54,0.5)...

RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:

div {

background: rgba(200, 54, 54, 0.5);

}

它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。(除非使用怪异的定位hack) 跨浏览器透明同样颇为棘手。

通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素:

1

声明一个保留颜色

并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。

div {

background: rgb(200, 54, 54); /* The Fallback */

background: rgba(200, 54, 54, 0.5);

}</code>

不过,这条退路在某些古董级浏览器中依然无效。

RGBa的浏览器支持情况

2

上面的数据是通过测试demo得到的,该测试页面包含了更多更完整的浏览器兼容性列表。

对IE浏览器的更好的退路

因为IE浏览器支持条件注释,我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果:

<>

【CSS通过RGBa将一个元素设置为透明效果】相关文章:

CSS实战:用dl、dd、dt做一个网页表单

CSS等比列放大缩小效果

DIV+CSS页面布局中BUG解决方法

CSS多个子框架居中

CSS实现段落首行缩进两个字符不再使用空格

CSS文字颜色不变下划线变颜色的实现

使用CSS3在触屏上为按钮实现激活效果

兼容各浏览器:CSS定义PNG透明效果

CSS立体按钮效果

CSS3动画帧数科学计算法

精品推荐
分类导航