我是rails编程的初学者，试图在一个页面上显示许多图像。有些图像是放在其他图像之上的。简单地说，假设我想要一个蓝色正方形，在蓝色正方形的右上角有一个红色正方形(但在角落里不紧)。我试图避免合成(与ImageMagick和类似)由于性能问题。
我只是想让重叠的图像彼此相对。
作为一个更困难的例子，想象一个里程表放在一个更大的图像中。对于六位数字，我需要合成一百万个不同的图像，或者在飞行中完成，其中所需要的只是将六张图像放在另一张图像的顶部。
当前回答
我注意到一个可能导致错误的问题是，在rrichter的回答中，下面的代码:
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
应该在样式中包含px单元。
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
除此之外，答案还不错。谢谢。
其他回答
内联样式只是为了清晰起见。使用真正的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>
简单的方法是使用background-image，然后在该元素中放入<img>。
另一种方法是使用css图层。有大量的资源可以帮助你做到这一点，只要搜索css图层。
下面的代码可能会给你一些启发:
<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>
JSFiddle
我怀疑埃斯波的解决方案可能是不方便的，因为它需要你完全定位两个图像。您可能希望第一个对象在流中定位。
通常，有一种很自然的方法可以做到这一点，那就是CSS。你把position: relative放在container元素上，然后在里面绝对放置子元素。不幸的是，您不能将一个图像放到另一个图像中。这就是为什么我需要container div。请注意，我将其设置为float，以使其自动适应其内容。使其显示为:inline-block理论上也可以，但浏览器的支持很差。
编辑:为了更好地说明我的观点，我从图片中删除了尺寸属性。如果您希望容器图像具有默认大小，并且事先不知道大小，则不能使用背景技巧。如果你这样做了，这是一个更好的方法。
这可能有点晚了，但你可以这样做:
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;
}
}
}
设置背景大小的封面。然后用另一个div包装你的div，现在设置max-width在父div上。
<div style="max-width:100px">
<div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>
