如何用另一张图片叠加图片？

Question

在HTML和CSS或jQuery中将图片与另一张图片叠加的好方法是什么？

Answer 1

有几种方法.

1. 将一个图像设置为容器上的背景,并将另一个图像放入其中
2. 位置(可能相对但几乎肯定绝对)一个图像在另一个上面
3. 使用负边距播放

哪个最好取决于你想要实现的目标(包括你想要表达的语义).

Answer 2

最简单的是 CSS 定位。将图像绝对放置在同一位置。确保父 DIV 相对定位（或非默认定位），以便图像的绝对位置位于父 DIV 内而不是窗口内。这应该适用于几乎所有支持 CSS 的浏览器。

HTML：

<div id="gallery">
    <img src="..." ... />
    <img src="..." ... />
</div>

CSS：

#gallery { position: relative; }
#gallery img { 
    position: absolute;
    top:0;
    left:0; }

如果你想确保图像完全相互覆盖，你还可以使用 CSS 设置高度和宽度，或者你可以确保图像大小相同，或者顶部的图像更大比下面的（顶部和下面取决于 HTML 或 z-index 中的顺序）。

JsFiddle示例（在许多浏览器中测试）