0

周辺領域がグレー表示されるポップアップボックスを作成しようとしています。私の問題は、シャドウdivの不透明度がポップアップの不透明度を上書きしているように見えることです。1つを絶対位置から固定位置に変更し、ポップアップのzインデックスを増やしてみましたが、どちらも機能しませんでした。

これが問題のスクリーンショットです。

そして、以下は関連するコードです（もっと見る必要があるかどうか尋ねてください）

.textPopup
{
    width: 1400px;
    height: 600px;
    background-color: White;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    z-index: 15;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    opacity: 0.2;
}
#innerPopup
{
    background-color: White;
    width: 1350px;
    height: 550px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 15;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    opacity: 1;
}

... snip
    <div id="popupShadow">
    </div>
    <div class="textPopup">
        <div id="innerPopup">
        </div>
    </div>
</body>
</html>
4

2 に答える 2

4

あなたが持っている問題はそれ#innerPopupが内部にあるということです#textPopup。その後、不透明度は子に継承され、子自身のプロパティで上書きすることはできません。

それらを分離できない場合は、プロパティrgbaではなく背景に値を使用することを検討してください。opacity

#textPopup {
    background-color: rgba(255,255,255,0.2);
}

あなたはそれがjsfiddleで動作しているのを見ることができます。

于 2012-08-15T10:06:59.440 に答える
0

CSSに次の変更を加えることで、期待どおりに機能させることができます。

#innerPopup
{
    position: relative; /* change this to relative - will allow you to override the parent specified opacity */

    opacity: 1;

    /* other properties */
}
于 2012-08-15T10:01:23.600 に答える