如何在 HTML 中将一个图像放置在另一个图像的顶部? [英] How do I position one image on top of another in HTML?

问题描述

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

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

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

解决方案

好的，过了一段时间，这就是我的想法:

.parent {位置:相对；顶部:0；左:0；}.image1 {位置:相对；顶部:0；左:0；边框:1px 红色实心；}.image2 {位置:绝对；顶部:30px；左:30px；边框:1px 绿色实心；}

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

作为最简单的解决方案.即:

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

I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.

I just want to position overlapping images relative to one another.

As a more difficult example, imagine an odometer placed inside a larger image. For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.

解决方案

Ok, after some time, here's what I landed on:

.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>

As the simplest solution. That is:

Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.

这篇关于如何在 HTML 中将一个图像放置在另一个图像的顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！