在Firefox中顯示背景圖片，但在IE中不顯示，可能是z-index問題

Question

我創建了一個網站，它在Firefox上運行，但在IE中卻不行，實際上背景圖像消失了，好像div消失了，也可能是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;
}

Answer 1

由於opacity: 0 ，圖像不可見opacity: 0 （使元素不可見）和頁margin-top: -150%; 到您的.panel類。 刪除它們將起作用。

---

如W3C中所指定，如果以percentages設置，則包括margin-top和margin-bottom的margin屬性是指包含塊的寬度 （而不是height ）。

工作小提琴

Answer 2

同樣，如果要淡化圖像，則在文檔加載后需要將不透明度更改為1。

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

這是一個工作的小提琴