Question

我有一个div（id = alertPanel），我想把它放在另一个div（id = captchaPanel）前面。 captchaPanel div的不透明度为.25 - 但我希望前警告DIV tp是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;
    }

Answer 1

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

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

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

fiddle

您还可以更改标记，以便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

具有CSS不透明性的特异性问题：覆盖父div的不透明度

1 个答案: