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（使元素不可见）和margin-top: -150%;到.panel类，图片不可见。删除它会有效。

正如W3C中所述，包含margin和margin-top的{{1}}属性引用了包含块的宽度（不是身高），如果设置在margin-bottom。

<强> Working Fiddle

Answer 2

此外，如果打算让图像淡入，则需要在文档加载后将不透明度更改为1。

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

这是一个有效的Fiddle

Firefox中的背景图片显示但IE中没有，可能是z-index问题

2 个答案: