Html 将图像置于另一图像之上

我有背景。在这个背景之上，我有一个图像覆盖在上面。我要做的是在背景底部覆盖一个图像：

像这样：

HTML:

---

使用一个相对的包装器，类似这样的东西

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>

---

您基本上可以在自己的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>

文本文本文本更多文本

---

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

如果您无法更改

html

的结构，那么我想您可以将

设置为相对：

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

并固定第二个img的位置：

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

它对您有用吗？
您的顶部和底部元素需要在背景中

HTML
演示：“在背景的顶部，背景的底部除外”什么？例如，覆盖背景图像，在背景图像的底部。我要做的是添加底部的图像。整个框是不是就是滚动bg的
框？这不起作用。它仍然将其放置在背景图像下方，而不是覆盖背景图像。如果您按照我所说的做，并使用CSS适当地定位每个图像，它将起作用。我尝试过改变周围的位置，但没有一个成功：/然后，您必须更改html和divs的结构如果我想使背景每边变薄10 px，请尝试在
.background
声明中添加边距，例如
边距：0 10px
。
.scroll-bg {
    width: 810px;
    float: right;
    position: relative;
}

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

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

.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");
}