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

问题描述

我是rails编程的初学者，试图在一个页面上显示许多图片。一些图像是躺在别人的顶部。为了简单，说我想要一个蓝色的正方形，在蓝色正方形的右上角有一个红色方块（但在角落不紧）。我试图避免由于性能问题的合成（与ImageMagick和类似）。

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

作为一个更困难的例子，想象一个里程表放在一个更大的图像里面。对于六位数字，我需要复合一百万个不同的图像，或者全部在飞行中，其中所需要的是将六个图像放在另一个的顶部。

解决方案

好的，过了一段时间，这里是我登陆的：

  .parent {position：relative; top：0; left：0;}。image1 {position：relative; top：0; left：0;}。image2 {position：absolute; top：30px; left：70px;}  

 < div class = > < img class =image1src =https://placehold.it/50/> < img class =image2src =https://placehold.it/100/>< / div>  

>

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

创建一个放置在页面流中的相对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;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}

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