将图像放在另一个图像的顶部

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>

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