CSS中不透明度继承问题的处理
关于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来实现。
如果还有其他方法的话,积极留言哟~