我是 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://via.placeholder.com/50" />
<img class="image2" src="https://via.placeholder.com/100" />
</div>
作为最简单的解决方案。那是：
创建一个放置在页面流程中的相对div；将基本图像作为相对位置首先放置，以便 div 知道它应该有多大；将叠加层放置为相对于第一张图像的左上角的绝对值。诀窍是让相对值和绝对值正确。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
