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来实现。

如果还有其他方法的话，积极留言哟~

转载于:https://www.cnblogs.com/aaron-shu/p/4095930.html