CSS实现父元素半透明，子元素不透明

最新推荐文章于 2023-09-26 16:26:35 发布

weixin_30871293

最新推荐文章于 2023-09-26 16:26:35 发布

阅读量568

点赞数

原文链接：http://www.cnblogs.com/aleafo/p/3696519.html

版权

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

如下代码，则子元素中也将是半透明效果，无论你将子元素的半透明值重置还是如何都不会改变这一情况。

.parent{opacity:0.5; background-color:#fff;}
.child{opacity:1.0; background-color:#fff; height:200px;}

HTML:

<div class="parent">
    <div class="child">哈哈哈</div>
</div>

其实在新的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来控制其位置的呈现，这种具体就不再陈述了，网上解决方案很多。

转载于:https://www.cnblogs.com/aleafo/p/3696519.html

关注