CSS的不透明度影响其他项目

Question

我有一块JavaScript，该javaScript在启动时启动了整个页面封面，并且在封面顶部打开了两个Divs"对话框"one_answers"对话框"。因此，这就像有通知的黑色背景。

我遇到的问题是我希望"封面"背景是透明的/具有不透明性，但由于某种原因，这也导致"对话"one_answers"对话" 2'div背景是透明的，我不希望这种情况发生，我不确定为什么会发生这种情况？

有人可以告诉我我做错了什么。

<script type="text/javascript">
    window.onload = function showPopUp(el) {
    var cvr = document.getElementById("cover")
    var dlg = document.getElementById("dialog")
    cvr.style.display = "block"
    dlg.style.display = "block"
    if (document.body.style.overflow = "hidden") {
        cvr.style.width = "1024"
        cvr.style.height = "100&#37;"
        }
    }
    </script>
    <style type="text/css">
    #cover {
    display:none;
    position:absolute;
    z-index:98;
    left:0px;
    top:0px;
    width:100%;
    height:2648px;
    background-color:#fff;
    filter:alpha(Opacity=50);
    opacity:0.7;
    -moz-opacity:0.7;
    -khtml-opacity:0.7;
    overflow:hidden;
    }
    #dialog {
     background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
        background-repeat: no-repeat;
        background-size:311px 187px;
        height:187px;
        width:311px;
        margin-top:300px;
        margin-left:650px;
    z-index: 99; 
    position:fixed;

    }
    #dialog2 {
     background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
        background-repeat: no-repeat;
        background-size:311px 187px;
        height:187px;
        width:311px;
        margin-top:300px;
        margin-left:230px;
    z-index: 99; 
    position:fixed;

    }
    </style>
    </head>
    <div id="cover">
    <div id="dialog">
    </div>
    <div id="dialog2">
    </div>
    <div class="foo"></div>
    </div>

                    <script type="text/javascript">
                $(document).ready(function(){
                    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
                    //Vertical Sliding
                    //Caption Sliding (Partially Hidden to Visible)
                    $('.boxgrid.caption').hover(function(){
                        $(".cover", this).stop().animate({top:'-38px'},{queue:false,duration:200});
                    }, function() {
                        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200});
                    });
                });
                    </script>

Answer 1

CSS不透明效果所有内容和所有标签。您必须将盖子与对话框分开。这样：

    <div id="cover"></div>
    <div id="dialog">
    </div>
    <div id="dialog2">
    </div>
    <div class="foo"></div>

Answer 2

而不是使用opacity，可以使用rgba颜色格式：

#cover {
    ....
    background: rgba(255, 255, 255, 0.7);
    ....
}

应该解决您的问题而不弄乱html。

Answer 3

put

<div id="dialog">
</div>
<div id="dialog2">
</div>

之外

<div id="cover">

或，放入CSS＃Dialog1和＃Dialog2：

filter:alpha(Opacity=100);
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;

希望它有帮助：）