影響其他項目的CSS不透明度？

我有一段javascript，它啓動了頁面啓動時的整個頁面封面以及在封面頂部打開的兩個div對話框和對話框2。所以就像是通知了一個背景暗淡的背景。影響其他項目的CSS不透明度？

我得到的問題是我想'封面'背景是透明的/有不透明，它確實，但由於某種原因，這也導致'對話框'和'dialog2'的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>

來源

2012-12-29 James Matthews

CSS不透明會影響其中的所有內容和所有標記。您必須將封面與對話框分開。像這樣：

<div id="cover"></div> 

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

來源

2012-12-29 09:33:08 Auxiliary

把

外

<div id="cover">

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

或者，把在CSS＃dialog1和＃dialog2：

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

希望它能幫助:)

來源

2012-12-29 09:34:04 Avishek

而不是使用opacity的，你可以使用rgba顏色格式：

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

這應該解決您的問題，而與HTML搞亂。

來源

2012-12-29 13:25:35 hayavuk

影響其他項目的CSS不透明度？

回答

相關問題