为什么 z-index 不适用于不透明度？答案

【问题标题】：why is z-index not working for opacity?为什么 z-index 不适用于不透明度？
【发布时间】：2012-07-20 19:28:35
【问题描述】：

我有两个 div，在外部 div 上我给出了 0.1 的不透明度，然后我有一个不应继承父容器不透明度属性的内部 div。但是为了避免这种情况，我所做的是添加一个 z -index 属性（高于子元素），但它不起作用。如何避免子 div 继承其父容器的 opacity 属性：

<!DOCTYPE HTMl>
<html>
    <head>  
        <style type="text/css">
            #outer{width:500px;height:400px;background:#000000;border:1px solid red;opacity:.1;z-index:1}
            #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;z-index:2}

        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

【问题讨论】：

您不能使用 z-index 来定位父/子之间的相对位置。谷歌搜索"opacity inheritance css" 会为您提供一堆关于您的问题的好文章。
你也可以查看stackoverflow.com/questions/5138006/…

标签： html css z-index

【解决方案1】：

您可以使用 rgba 属性来使其正常工作。例如下面应该工作：

<!DOCTYPE HTMl>
<html>
    <head>  
        <style type="text/css">
            #outer{width:500px;height:400px;background:#000000;border:1px solid red;background:rgba(255,0,0,0.5);}
            #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;background:rgba(255,0,0,1);}

        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

【讨论】：