2

我有一个关于两个对象定位的问题：图像和 div。我希望 bg2.png 图像留在 div 下。我一直遇到图像将 div 向下按 img 的高度的问题。我该如何避免呢？

我尝试用“top：”值按下图像，但当然它让我在 div 上方留有空白区域。我还尝试向“maincontent” div 添加负“top：”值和相对位置，但它又给我留下了空白区域，唯一的区别是这次它在 div 下。

HTML：

<body>
 <img src="./images/bg2.png" class="bgimg" />
 <div id="maincontent">
 </div>
</body>

CSS：

body {
    width: 100%;
    background: #000;
}
.bgimg {
    z-index: -1;
    overflow: hidden;
    left: 70px;
    position: relative;
    display: block;
}
#maincontent {
    height: 520px;
    width: 960px;
    margin: 20px auto;
    display: block;
    z-index: 8;
}

提前致谢。

编辑 - 我想要实现的目标： 点击我！

4

2 回答 2

3

2个解决方案：

更改您的 HTML 结构：

<body>
 <div id="maincontent">
 </div>
 <img src="./images/bg2.png" class="bgimg" alt="some">
</body>

或将其作为背景图像：

<body>
  <div id="maincontent">
  </div>
</body>

#maincontent {
 background: url(./images/bg2.png) no-repeat 0 100%;
 padding-bottom: height_of_image_in_px;
}
于 2012-08-13T10:16:12.053 回答
1 
<style>
body {
    width: 100%;
    background: #000;
}
.bgimg {
    z-index: -1;
    overflow: hidden;
    left: 70px;
    position: relative;
    display: block;
}
#maincontent {
    height: 520px;
    width: 960px;
    margin: 20px auto;
    display: block;
    z-index: 8;
}

</style>

<body>

 <div id="maincontent">
     <img src="./images/bg2.png" class="bgimg" alt="some info about image here">
 </div>
</body>

如果你想在 div 中使用该图像，请使用此代码。或者如果你想让那个 div 的图像背景使用 css background 属性

于 2012-08-13T10:21:55.620 回答