如何将一张图片覆盖在另一张图片上？

Question

在HTML和CSS或jQuery中，覆盖一张图片的好方法是什么？

- aneuryzm

Answer 1

有几种方法。

1. 在容器上设置一个图像作为背景，将另一个图像放在其中。
2. 将一张图像定位在另一张图像之上（可能是相对定位，但几乎肯定是绝对定位）。
3. 使用负边距进行调整。

哪种方法最好取决于您要实现的目标（包括您要表达的语义）。

- Quentin

---

最跨浏览器的是哪一个？第二个吗？ - aneuryzm

@dave - 你真的试过用Mosaic吗？ ;) - Peter Ajtai

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示例（在许多浏览器中测试）

- Peter Ajtai

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;
}

- russjman

---

我知道这听起来很蠢，但有没有办法让背景图片在顶部显示？ - aneuryzm

你需要开始操作绝对定位和 .box 内的特定类。CSS 会更冗长一些，我稍后会发布一个新答案。 - russjman