0

我有一个 div (id=alertPanel) 我想放在另一个 div (id=captchaPanel) 前面。captchaPanel div 的不透明度为 0.25——但我希望前面的警报 DIV tp 是 100% 不透明的。（我想要一个类似灯箱的效果）。两个 DIV 都有 ID，并且不在类中。我将后 div 的不透明度指定为 0.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;
    }
4

1 回答 1

4

子代将继承其父代的不透明度。

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

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

小提琴

您还可以更改标记，以便 alertPanel is not a descendant ofcaptchaPanel`

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

小提琴 2

于 2013-09-04T00:15:02.723 回答