Html 特殊性问题w/CSS不透明度：覆盖父div的不透明度

我有一个div（id=alertPanel），我想放在另一个div（id=captchaPanel）前面。captchaPanel div的不透明度为.25，但我希望front alert div tp为100%不透明。（我想要一个类似灯箱的效果）。两个div都有id，不在类中。我将back div的不透明度指定为.25，将front div的不透明度指定为1——但front div仍然不是不透明的（至少在Chrome和Safari中是如此……在FF和IE中也是如此）。我正在一个简单的CSS应用程序中制定一个特定于ID的规则，所以我对为什么会得到这个结果感到困惑

以下是HTML：

      <div id='captchaPanel'>

        <div id='alertPanel'>
            in the middle
        </div>

        //some HTML

    </div>  

---

子对象将继承其父对象的不透明度

如果您仅使用颜色，请将#CaptchPanel更改为使用rgba：

background-color: rgba(0,0,0,.05);

您还可以更改标记，使alertPanel

不是CaptchPanel的后代`

<div class="wrapper">
    <div id='captchaPanel'>//some html</div>
    <div id='alertPanel'>in the middle</div>
</div>


//一些html
在中间

子对象将继承其父对象的不透明度

如果您仅使用颜色，请将#CaptchPanel更改为使用rgba：

background-color: rgba(0,0,0,.05);


您还可以更改标记，使alertPanel
不是CaptchPanel的后代`

<div class="wrapper">
    <div id='captchaPanel'>//some html</div>
    <div id='alertPanel'>in the middle</div>
</div>


//一些html
在中间

这就是原因。所以，也许我应该把验证码面板包装在另一个div中，让警报面板成为这个新面板div的子组件？这就解释了。所以也许我应该把captcha面板包装在另一个div中，让警报面板成为这个新面板div的子组件？