Question

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

Answer 1

您可以使用rgba属性来实现此功能。下面的e-g应该有效：

<!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>

Answer 2

为什么你认为内部div不应该受到它的父或者outterWrapper div的影响？

不要将opacity用作cssStyleAttribute（或简称css属性），使用'filter'（For IE）

 filter:alpha(opacity=10);

对于Modern Browsers，使用RGBA指定颜色值，rgba（0,0,0,0.5） - 半透明度为黑色。

首先是text / css

#outterWrapper {
position:relative;
background-color:black;
background-color:rgba(0,0,0,0.5);
filter:alpha(opacity=50);
border:3px solid red;
border:3px solid rgba(255,0,0,0.8);
min-width:400px;
min-height:400px;
width:50%;
height:50%;
display:block;
}
#innerWrapper {
display:block;
background-color:blue;
position:absolute;
left:2%;
top:2%;
width:96%;
height:96%;
z-index:2;
}

而不是除数，

<div id="outterWrapper"><div id="innerWrapper">&nbsp;</div></div>

在任何情况下，您都应该始终指定cssStyleAttributes'display'和'position'。你还应该在内部div中放置一个空格（''）。

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

2 个答案: