在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中

回答

相關問題