2

image と div という 2 つのオブジェクトの配置について質問があります。bg2.png 画像を div の下に置きたい。img の高さで div を押し下げる画像で問題が発生し続けます。どうすればそれを回避できますか?

「top:」値で画像を押し下げてみましたが、もちろん、div の上に空の領域が残ります。また、負の「top:」値と相対位置を「maincontent」div に追加しようとしましたが、再び空の領域が残りました。唯一の違いは、今回は 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 に答える