我有一个div(id=alertPanel),我想放在另一个div前面(id=captchaPanel)。captchaPaneldiv的不透明度为.25,但我希望前面的警报div是100%不透明的。(我想要一个类似灯箱的效果)。两个DIV都有ID,并且不在类中。我给后div分配了.25的不透明度,给前div分配了1的不透明度——但前div仍然不是不透明的(至少在Chrome和Safari中……很可能在FF和IE中也是如此)。我正在一个简单的CSS应用程序中制定一个ID特定的规则,所以我很困惑为什么会得到这个结果。
这是HTML:
<div id='captchaPanel'>
<div id='alertPanel'>
in the middle
</div>
//some HTML
</div>
这是CSS:
#alertPanel
{
height: 10%;
width: 10%;
margin-left: auto ;
z-index:1;
margin-right: auto ;
position: absolute;
background-color:blue;
float:none;
opacity:1 !important;
}
#captchaPanel
{
height: 60%;
width: 57%;
background-color:#580200;
vertical-align:middle;
margin-left: auto ;
margin-right: auto ;
border-radius:15px;
opacity:.05;
z-index:-1;
}
子级将继承其父级的不透明度。
如果您只使用颜色,请将#captchaPanel更改为使用rgba:
background-color: rgba(0,0,0,.05);
小提琴
您也可以更改标记,使alertPanel is not a descendant of
captchaPanel `
<div class="wrapper">
<div id='captchaPanel'>//some html</div>
<div id='alertPanel'>in the middle</div>
</div>
fiddle 2