0

我创建了一个站点，它可以在 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;
}
4

2 回答 2

1

由于opacity: 0（使元素不可见）和margin-top: -150%;您的.panel班级，图像不可见。删除它们它将起作用。

如W3C中所述，margin属性包括margin-top和margin-bottom引用包含块的宽度（而不是高度），如果设置在percentages.

工作小提琴

于 2013-03-26T08:26:35.490 回答
0

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

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

这是一个工作小提琴

于 2013-03-26T08:47:55.097 回答