0

我有以下设计，其中我有一个介于两者之间的图像<div>。我的目标是保持两个 div 之间的图像。

在此示例中，我希望主图像 (400x200) 位于绿色图像 ( #firstLayer) 和灰色 (身体背景) 之间。我的解决方案在 Firefox 16、safari 和 Chrome 中运行良好，但在 IE 中不起作用。在 IE 中，图像显示在#firstLayer.

这是问题的JFiddle

这是用于快速查看的 html 和 css：

HTML：

<body>
<div id="firstLayer">
  <img id="image" class="center" src="http://lorempixel.com/400/200/" >
         <div id="mainContent">
          main page content
         </div>
  </div>
</body>

CSS：

body{
 background:gray;  
}
#firstLayer{
    background: url("http://www.enough.de/fileadmin/docimport/images/background-image.png") no-repeat;

    height:500px;
    width:500px;

}
img#image{
 z-index:-1; 
}

.center{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

IE中这个问题的修复方法是什么？

4

3 回答 3

1

尝试这样的事情。

 <div id="firstLayer" style="width:700px;height:700px;text-align:center;">
         <center>   <img id="image" class="center" src="My_Signature.jpg" 
                                   style="width:400px;height:200px;" > </center>
         <div id="mainContent">
          main page content
         </div>
  </div>

希望，它会帮助你。干杯。！！

于 2012-11-01T16:43:27.140 回答
1

尝试添加position:relative;到您的#firstlayerdiv：

#firstLayer {
    position: relative;
}

这与 IE 中的一个错误有关，该错误将忽略图像上的 z-index，因为它是绝对定位的，添加相对于父 div 的位置可以解决此问题。

于 2012-11-02T09:38:40.693 回答
0

为了使您的图像居中，您可以尝试 2 个选项：

1-将您的图像放在“中心”标签内。

前任：<center><img id="image" class="center" src="http://lorempixel.com/400/200/" ></center>

2-在你的图像上使用这个 css 类。

img.center{ display: block; margin: 0 auto;}
于 2012-11-01T16:25:34.377 回答