特异性问题w/ CSS混浊:覆盖父div的不透明度
特异性问题w/ CSS混浊:覆盖父div的不透明度
提问于 2013-09-04 00:11:41
我有一个div (id=alertPanel)，我想把它放在另一个div (id=captchaPanel)前面。captchaPanel div有一个不透明的.25 --但是我希望正面警报DIV tp是100%不透明的。(我想要一种类似灯箱的效果)。这两个DIVs都有in，而且都不在类中。我指定背面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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-04 00:15:02
子代将继承其父级的不透明度。
如果只使用颜色，则将#captchaPanel更改为使用rgba：
background-color: rgba(0,0,0,.05);小提琴
您还可以更改标记，以便alertPanelis not a descendant ofcaptchaPanel`‘
<div class="wrapper">
<div id='captchaPanel'>//some html</div>
<div id='alertPanel'>in the middle</div>
</div>小提琴2
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18603425
复制相关文章
相似问题
腾讯云开发者
