背景图像显示在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的问题

回答

相关问题