如何在HTML中将一个图像放置在另一个图像之上？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我只想相对于彼此放置重叠的图像。

举一个更困难的例子，想象一下将里程表放在更大的图像中。对于六位数字，我将需要合成一百万个不同的图像，或者即时进行处理，其中所需要做的就是将这六个图像放置在另一个图像之上。

回答：

好的，过了一段时间，这就是我的目标：

.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://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

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

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

以上是 如何在HTML中将一个图像放置在另一个图像之上？ 的全部内容， 来源链接： utcz.com/qa/436246.html

回到顶部