css中div下的图像定位_Css_Positioning

css中div下的图像定位

css

css中div下的图像定位,css,positioning,Css,Positioning,我有一个关于两个对象定位的问题：image和div。我希望bg2.png image保持在div下。我一直遇到图像按img的高度向下推div的问题。我如何避免这种情况我试着用“top:”值向下推图像，但它当然会在div上方留下空白区域。我还试着将负“top:”值和相对位置添加到“maincontent”div，但它再次给我留下空白区域，唯一的区别是这次它在div下方 HTML: <body> <img src="./images/bg2.png" class="bgimg"

我有一个关于两个对象定位的问题：image和div。我希望bg2.png image保持在div下。我一直遇到图像按img的高度向下推div的问题。我如何避免这种情况

我试着用“top:”值向下推图像，但它当然会在div上方留下空白区域。我还试着将负“top:”值和相对位置添加到“maincontent”div，但它再次给我留下空白区域，唯一的区别是这次它在div下方

HTML:

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

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;
}

提前谢谢

编辑-我试图实现的目标：

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;
}


#主要内容{
背景：url（./images/bg2.png）不重复0 100%；
填充底部：图像的高度（单位：像素）；
}

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;
}


#主要内容{
背景：url（./images/bg2.png）不重复0 100%；
填充底部：图像的高度（单位：像素）；
}


身体{
宽度：100%；
背景：#000；
}
.bgimg{
z指数：-1；
溢出：隐藏；
左：70像素；
位置：相对位置；
显示：块；
}
#主要内容{
高度：520px；
宽度：960px；
保证金：20px自动；
显示：块；
z指数：8；
}

如果您想在div中使用该图像，请使用此代码。或者，如果您想使该div的图像成为背景，请使用css background属性


身体{
宽度：100%；
背景：#000；
}
.bgimg{
z指数：-1；
溢出：隐藏；
左：70像素；
位置：相对位置；
显示：块；
}
#主要内容{
高度：520px；
宽度：960px；
保证金：20px自动；
显示：块；
z指数：8；
}

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

为什么不使用：

#maincontent{background image:（'./images/bg2.png'）；}

Argh，愚蠢的我。我忘了补充说我不想把整个图像保存在div下，只是它的一部分。比如在那个例子中：为什么不使用：

#maincontent{background image:（'./images/bg2.png'）}

Argh，愚蠢的我。我忘了补充说我不想把整个图像保存在div下，只是它的一部分。比如在那个例子中：