首页 > 代码库 > 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中不透明度继承问题的处理