如何在 HTML 中将一张图片放在另一张图片之上？

Question

我是 Rails 编程的初学者，试图在一个页面上显示许多图像。有些图像要放在其他图像之上。为了简单起见，假设我想要一个蓝色方块，蓝色方块的右上角有一个红色方块（但角落不紧）。由于性能问题，我试图避免合成（使用 ImageMagick 和类似的）。

我只想相对于彼此定位重叠图像。

作为一个更困难的例子，想象一个里程表放在一个更大的图像中。对于六位数，我需要合成一百万张不同的图像，或者即时完成所有操作，所需要做的只是将六张图像放在另一张图像之上。

原文由 rrichter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，一段时间后，这就是我登陆的内容：

 .parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

 <div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

作为最简单的解决方案。那是：

创建一个放置在页面流中的相对div；首先将基本图像作为相对图像放置，以便 div 知道它应该有多大；将叠加层绝对放置在第一张图像的左上角。诀窍是让亲戚和绝对正确。

原文由 rrichter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我将一幅图像浮动在另一幅图像上所做的粗略观察。

 img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

 <img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">

资源

原文由 Espo 发布，翻译遵循 CC BY-SA 4.0 许可协议