0

別の div (id=captchaPanel) の前に配置したい div (id=alertPanel) があります。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;
    }
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 に答える