Question

我有一段javascript，它会在页面启动时启动整个页面封面，并在封面顶部打开两个div''dialog'和'dialog2'。所以这就像是带有通知的黑色背景。

我得到的问题是我希望'封面'背景透明/具有不透明度，但它确实如此，但由于某种原因，这也导致'对话'和'dialog2'ds背景变得透明，我不希望这种情况发生，我不确定为什么会发生这种情况？

有人可以告诉我，我做错了吗。

<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

把

<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;

希望有所帮助：）

css中的不透明度会影响其他项目吗？

3 个答案: