html - 将图像放在另一个图像之上

Question

我有背景。在该背景之上，我在顶部覆盖了一张图像。我正在尝试做的是在其底部用图像覆盖背景：

像这样：

HTML：

<div class="scroll-bg">
  <img src="img/scroll_top.gif" style="position:absolute" /><!-- TOP OVERLAY IMAGE -->
      <div class="scroll-bg-img">
        <div class="scroll-content">
        <center><img src="img/recent_news.gif" /></center>
        <div style="width:100%;margin-top:15px">
          <div style="margin-top:10px;color:black">
            <p>TEXT TEXT TEXT TEXT MORE TEXT</p>
          </div>
        </div>
      </div>
   </div>       
</div>

CSS：

.scroll-bg {
    width: 810px;
    float: right;
}

.scroll-content {
    width: 765px;
    margin-left: 15px;
    word-wrap: break-word;
}

.scroll-bg-img {
    background-image: url(img/scroll_bg.gif);
    background-repeat: repeat-y;
    z-index: 1;
    width: 795px; 
    height: 1000px;
    margin-top: 40px; 
    margin-left: 7px;
    padding-top: 15px;
}

Answer 1

您的顶部和底部元素需要在背景内。

HTML

<div class="background">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS

.background {
    position: relative;
    background: url("path/to/bg.png");
}

.top {
    position: absolute;
    width: 100%;
    top: 0;
    background: url("path/to/top.png");
}

.bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: url("path/to/bottom.png");
}

演示：http: //jsfiddle.net/TrRcc/

Answer 2

如果你不能改变你的结构，html那么我想你可以将你设置.scroll-bg为相对的：

.scroll-bg {
    width: 810px;
    float: right;
    position: relative;
}

并固定第二个img的位置：

.scroll-content img {
    position: absolute;
    bottom: 0;
}

它会和你一起工作吗？

Answer 3

使用相对包装器，类似这样；

CSS

.imgWrapper {
    position: relative;
    width: 200px;
    height: 200px;
}

.imgWrapper img {
    position: absolute;
    width: 200px;
    height: 200px;
    display: block;
}

HTML

<div class="imgWrapper">
    <img src="img1.png" />
    <img src="img2.png" />
</div>

Answer 4

您基本上可以在自己的 HTML 中找到答案。

<div class="scroll-bg">
    <img src="img/scroll_top.gif" style="position:absolute" /><!-- TOP OVERLAY IMAGE -->
    <div class="scroll-bg-img">
        <div class="scroll-content">
            <center><img src="img/recent_news.gif" /></center>
            <div style="width:100%;margin-top:15px">
                <div style="margin-top:10px;color:black">
                    <p>TEXT TEXT TEXT TEXT MORE TEXT</p>
                </div>
            </div>
        </div>
    </div>
    <img src="img/scroll_bottom.gif" style="position:absolute" /><!-- BOTTOM OVERLAY IMAGE -->
</div>

您只需适当地设置每个图像的位置，使一个在顶部，一个在底部。