一尘不染

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

css

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

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

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


阅读 3603

收藏
2020-05-16

共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://placehold.it/50" />

  <img class="image2" src="https://placehold.it/100" />

</div>

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

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

2020-05-16