在div中定位图像在css中

我有一个关于两个对象定位的问题：image和div。 我想让bg2.png图片留在div下。我不断遇到图像推div由img的高度的问题。我如何避免这种情况？在div中定位图像在css中

我试着按下“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; 
}

在此先感谢。

编辑 - 我想要实现： Click me!

来源

2012-08-13 Dreamwalker

为什么不使用： '#maincontent { 背景图像：（“./图像/ bg2.png”）; }' – ygssoni 2012-08-13 10:08:45

啊，愚蠢的我。我忘了补充说我不想在div下保留整个图像，只是其中的一部分。就像那个例子： [链接]（http://oi48.tinypic.com/2iihldw.jpg） – Dreamwalker 2012-08-13 10:23:02

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-13 10:16:12 Mark

<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背景属性是图像背景

来源

2012-08-13 10:21:55

在div中定位图像在css中

回答

相关问题