9

だから私は感じのようなライトボックスを作成しようとしています。#blackoutdivとdivを作成しました#enlargedBOX。

divの不透明度は90％に設定されています。これは、背景のWebサイトを少しだけ透けて表示したいのですが、 divに同じ不透明度を使用さ#blackoutせたくないためです。#enlargedBOXそれ#blackout自体の不透明度をそれ自体の中にあるものに強制しているようです。どうすればそれを止めることができますか？

<div id="blackout">
<div id="enlargedBOX">
        <img src="" width="500" height="500" border="0" />
    </div>
</div>

これがjsFiddleです

#enlargedBOX白いdivに赤い背景が透けて見えることがわかります。

4

2 に答える 2

21

使用するだけrgba()-デモ

#blackout {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    overflow:auto;
    z-index:100;
    background: rgba(0, 0, 0, .9);
}
于 2013-02-25T21:08:52.463 に答える
0

enlargedBOX背景オーバーレイdiv内からダイアログdivを取り出し、blackoutより高いz-indexを指定します。

jsFiddleの例

#enlargedBOX {
    position:relative;
    z-index:101;
    margin:50px auto;
    padding:0px;
    width:500px;
    height:500px;
    background:#FFF;
    opacity:1;
}

<div id="blackout"></div>
<div id="enlargedBOX">
    <img src="" width="500" height="500" border="0" />
</div>
于 2013-02-25T21:06:39.330 に答える