1

我有两个 div，在外部 div 上我给出了 0.1 的不透明度，然后我有一个不应继承父容器不透明度属性的内部 div。但为了避免这种情况，我所做的是添加 az -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>
4

1 回答 1

2

您可以使用 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>
于 2012-07-22T04:44:23.493 回答