CSS中不透明度继承问题的处理
浏览数：39 /
时间：2015年06月09日
关于CSS中不透明度的设置，除了兼容方面的问题，还有不透明度继承问题，这里只讨论下后者。
那么，
什么时候会发生不透明度继承问题？
当文档结构中有父子嵌套关系的时候，并且父元素有不透明度属性设置时，会发生不透明度继承问题，此时子元素也继承了父元素的不透明度，并且再另外设置子元素不透明度是无效的（如果父元素没有设置不透明度，子元素的设置是有效的）。
下面是相关代码和效果图：
CSS部分：
#parent{ height:400px; width:500px; background:green; opacity:0.3; filter:alpha(opacity=30);/*兼容IE5.5 IE7 IE8，在IETester下测试IE6并不支持*/ -moz-opacity:0.3;/*一些老版本Mozzila*/ -khtml-opacity:0.3;/*一些老版本Safari*/ } #child{ height:100px; width:100px; background:red; }
DOM结构部分：
<div id="parent"> <div id="child"></div> </div>
效果图：
图一 
图二
图一为设置不透明度后的效果，图二为没设置透明度的效果，可以看到，子元素child也具有了一定的透明度。
在实际应用中，我们有时希望的去是让底层看起来有透明效果，而让上层的元素仍为不透明。
那么，
该怎么解决？
1、使用具有透明效果的图片来代替background效果。
2、将父子元素的嵌套关系改为兄弟关系，并用绝对定位及z-index来实现。
如果还有其他方法的话，积极留言哟~
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
