首页 > 代码库 > CSS中不透明度继承问题的处理
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来实现。
如果还有其他方法的话,积极留言哟~
CSS中不透明度继承问题的处理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。