css3实现父元素半透明子元素不透明

css3实现父元素半透明子元素不透明

CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。

其实在新的CSS3规则里面的属性 GRBA已经可以方便的实现父元素透明,而子元素不透明了。 如下代码

<div class="parent" style="background:rgba(255,255,255,0.5)">
    <div class="child" style="height:200px; background-color:red">哈哈哈</div>
</div>

但是对于IE6~8方面就无法兼容了,可以适当的降级。 如果一定要兼容的话只能考虑使用绝对定位的,看上去是包含关系的两个层,其实是兄弟关系,使用JS来控制其位置的呈现,这种具体就不再陈述了,网上解决方案很多。

本文来自css答疑栏目,欢迎学习!

以上就是css3实现父元素半透明子元素不透明的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑