CSS实现⽗元素半透明，⼦元素不透明
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>
js获取子元素
</div>
其实在新的CSS3规则⾥⾯的属性 GRBA已经可以⽅便的实现⽗元素透明，⽽⼦元素不透明了。如下代码
<div class="parent" >
<div class="child" >哈哈哈</div>
</div>
但是对于IE6~8⽅⾯就⽆法兼容了，可以适当的降级。如果⼀定要兼容的话只能考虑使⽤绝对定位的，看上去是包含关系的两个层，其实是兄弟关系，使⽤JS来控制其位置的呈现，这种具体就不再陈述了，⽹上解决⽅案很多。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。