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

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设置高度和宽度，或者你可以确保图像大小相同，或者确保图像大小相同top大于下面的值（顶部和底部依赖于HTML或z-index中的顺序）。

的 JsFiddle example (test in many browsers)

Answer 3

HTML：

<div class="box">
  <img src="background.jpg" class="under" alt="" />
  <img src="overlay.jpg" class="over" alt="" />
</div>

的CSS：

.over {
    position:absolute;
    z-index:100;  
}

.under {
    position:absolute;
    z-index:99;
}

.box {
    position:relative;
}