背景圖像顯示在Firefox，但不是在IE瀏覽器，可能是z-index的問題

我創建了一個網站，它在Firefox的工作，但不是在IE瀏覽器，背景圖像消失實際上看起來像格消失了，也可能是一個z-index的問題，請您幫忙:(背景圖像顯示在Firefox，但不是在IE瀏覽器，可能是z-index的問題

以下是HTML代碼

<div id="wrapper"> 
    <!-- Home --> 
    <div id="landing" class="panel"> 
     <img src="images/bgmain_no_producer.jpg" class="bg" /> 
    </div> 
</div>

以下是CSS

#wrapper { 
    width: 90 % ; 
    /*float:left;*/ 
    min - height: 100 % ; 
    height: auto!important; 
    height: 100 % ; 
    margin: 0 auto 0px auto; 
} 
.panel { 
    min - width: 100 % ; 
    height: 100 % ; 
    overflow - y: hidden; 
    overflow - x: hidden; 
    position: absolute; 
    margin - top: -150 % ; 
    margin - left: -5 % ; 
    background - color: #555555; 
    opacity: 0; 
    z-index:0; 
    -webkit-transition: opacity .6s ease-in-out; 
    -moz-transition: opacity .6s ease-in-out; 
    -o-transition: opacity .6s ease-in-out; 
    -ms-transition: opacity .6s ease-in-out; 
    transition: opacity .6s ease-in-out; 
} 

img.bg { 
/* Set rules to fill background */ 
    min-width: 250px; 
    left: 50%; 
    margin-left: -50%; /* 50% */ 
    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 
/* Set up positioning */ 
    position:absolute; 
    top: 0; 
    z-index:-999; 
}

來源

2013-03-26 Peerapong Sutinrerk

爲什麼'的z-index：-999'？這可能是問題所在。你有沒有嘗試給出'z-index：1'還是一些正值？ – 2013-03-26 08:21:05

放寬度和高度IMG標籤，你有沒有指定的CSS，汽車或任何％固定的高度沒有任何意義的IE – 2013-03-26 08:22:06

的margin-top：-150％;在面板deoesn't似乎是正確沒有任何頂值，將其帶回在屏幕上。你能告訴我們你想達到什麼嗎？ – Ben 2013-03-26 08:27:57

的圖像是不可見的，因爲opacity: 0（品牌元素不可見的）和margin-top: -150%;您.panel類。刪除它們將工作。

如圖W3C指定，margin性質，包括margin-top和margin-bottom指包含塊（不是高度）的寬度，如果在設定percentages。

Working Fiddle

來源

2013-03-26 08:26:35

此外，如果打算是讓圖像淡入，那麼你需要的文件已加載後，不透明度改爲1。

document.getElementById('landing').style.opacity = 1;

這裏是一個工作Fiddle

來源

2013-03-26 08:47:55 Ben

背景圖像顯示在Firefox，但不是在IE瀏覽器，可能是z-index的問題

回答

相關問題