我是 Rails 编程的初学者，试图在一个页面上显示许多图像。有些图像要放在其他图像之上。为了简单起见，假设我想要一个蓝色方块，蓝色方块的右上角有一个红色方块（但角落不紧）。由于性能问题，我正在尝试避免合成（使用 ImageMagick 和类似方法）。
我只想将重叠的图像相对于彼此定位。
作为一个更困难的例子，想象一个里程表放置在一个更大的图像中。对于六位数字，我需要合成一百万张不同的图像，或者全部在运行中完成，所需要的只是将六张图像放在另一个上面。
【问题讨论】：
标签： html css optimization graphics
好的，过了一段时间，这就是我登陆的内容：
.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 知道它应该有多大；将叠加层放置为相对于第一张图像左上角的绝对值。诀窍是让相对和绝对正确。
【讨论】：
a 而“b”的 ID 为 b，那么 this JavaScript code（通过某种计算设置 x 和 y）是否可以改变 b 的位置？
这是我为将一张图片浮动到另一张图片上所做的简单介绍。
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">【讨论】：
这里的代码可能会给你一些想法：
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>
我怀疑Espo's solution 可能不方便，因为它要求您绝对定位两个图像。您可能希望第一个在流程中定位自己。
通常，有一种自然的方式可以做到这一点，那就是 CSS。您将 position: relative 放在容器元素上，然后将子元素绝对定位在其中。不幸的是，您不能将一张图片放入另一张图片中。这就是我需要容器 div 的原因。请注意，我将其设为浮点数以使其自动适应其内容。让它显示：inline-block 理论上应该也可以，但是浏览器支持很差。
编辑：我从图像中删除了尺寸属性以更好地说明我的观点。如果您希望容器图像具有其默认大小并且事先不知道大小，则不能使用background trick。如果你这样做，这是一个更好的方法。
【讨论】：
我注意到可能导致错误的一个问题是，在 rrichter 的回答中，代码如下：
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
应该在样式中包含 px 单位，例如。
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
除此之外，答案效果很好。谢谢。
【讨论】：
您可以绝对定位pseudo elements 相对于它们的父元素。
这为每个元素提供了两个额外的层 - 因此将一个图像放置在另一个图像之上变得很容易 - 使用最少的语义标记（没有空的 div 等）。
标记：
<div class="overlap"></div>
css:
.overlap
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.overlap:after
{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background-color: red;
}
【讨论】：
可能有点晚了，但你可以这样做：
HTML
<!-- html -->
<div class="images-wrapper">
<img src="images/1" alt="image 1" />
<img src="images/2" alt="image 2" />
<img src="images/3" alt="image 3" />
<img src="images/4" alt="image 4" />
</div>
SASS
// In _extra.scss
$maxImagesNumber: 5;
.images-wrapper {
img {
position: absolute;
padding: 5px;
border: solid black 1px;
}
@for $i from $maxImagesNumber through 1 {
:nth-child(#{ $i }) {
z-index: #{ $maxImagesNumber - ($i - 1) };
left: #{ ($i - 1) * 30 }px;
}
}
}
【讨论】：
这里的内联样式只是为了清楚起见。使用真正的 CSS 样式表。
<!-- First, your background image is a DIV with a background
image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
<!-- Second, create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<div style="position: relative; left: 0; top: 0;">
<!-- Now you can place your IMG tags, and position them relative
to the container we just made -->
<img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
</div>
</div>
【讨论】：
最简单的方法是使用背景图像，然后在该元素中放置一个 。
另一种方法是使用 css 图层。有大量资源可帮助您解决此问题，只需搜索 css layers。
【讨论】：
设置背景大小的封面。然后用另一个 div 包裹你的 div 现在在父 div 上设置 max-width。
<div style="max-width:100px">
<div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>
【讨论】：
您可以使用CSS-Grid，如果您想堆叠、重叠 内容，这是一个非常方便的解决方案。首先你需要定义你的网格。在该网格内，您“告诉”您的 img-tags 在该网格内的位置。如果您将它们定义为位于网格的同一起点，它们将重叠。在以下示例中，两张图像重叠，一张在它们下方。
<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/">
</div>你可以找到CSS-Grid here的一个很好的解释。
【讨论】：
@buti-oxa：不要迂腐，但你的代码是无效的。 HTML width 和 height 属性不允许单位；您可能会想到 CSS width: 和 height: 属性。您还应该提供带有 <style> 标签的内容类型（text/css；参见 Espo 的代码）。
<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>
将px; 留在width 和height 属性中可能会导致渲染引擎停止。
【讨论】：
创建一个放置在页面流中的相对div；首先将基础图像作为相对图像放置，以便 div 知道它应该有多大；将叠加层放置为相对于第一张图像左上角的绝对值。诀窍是让相对和绝对正确。
【讨论】：