我是rails编程的初学者,试图在一个页面上显示许多图像。有些图像是放在其他图像之上的。简单地说,假设我想要一个蓝色正方形,在蓝色正方形的右上角有一个红色正方形(但在角落里不紧)。我试图避免合成(与ImageMagick和类似)由于性能问题。

我只是想让重叠的图像彼此相对。

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


当前回答

设置背景大小的封面。然后用另一个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>

其他回答

创建一个相对的div,放在页面的流中;将基本图像放在相对位置,这样div就知道它应该有多大;相对于第一张图片的左上方,将重叠图层放置在绝对位置。诀窍在于正确使用亲戚和绝对。

下面的代码可能会给你一些启发:

<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理论上也可以,但浏览器的支持很差。

编辑:为了更好地说明我的观点,我从图片中删除了尺寸属性。如果您希望容器图像具有默认大小,并且事先不知道大小,则不能使用背景技巧。如果你这样做了,这是一个更好的方法。

内联样式只是为了清晰起见。使用真正的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-Grid,这是一个非常方便的解决方案,如果你想堆叠,重叠内容。首先需要定义网格。在该网格中,您“告诉”img-tags在该网格中的位置。如果将它们定义为位于网格的同一起点,则它们将重叠。在下面的例子中,两个图像重叠,一个在它们下面。

< span style=" font - family:宋体;Grid-template-columns: [first-col] 100%;Grid-template-rows:[第一行]300px"> <img src="https://fakeimg.pl/300/" style=" font - family:宋体;grid-row-start:板凳”> <img src="https://fakeimg.pl/300/" style=" font - family:宋体;grid-row-start:板凳”> < img src = " https://fakeimg.pl/300/ " > < / div >

你可以在这里找到一个关于CSS-Grid的很好的解释。

好吧,过了一段时间,我发现:

.parent { 位置:相对; 上图:0; 左:0; } .image1 { 位置:相对; 上图:0; 左:0; 边框:1px红色实体; } .image2 { 位置:绝对的; 上图:30 px; 左:30 px; 边框:1px绿色实体; } < div class = "父" > <img class="image1" src="https://via.placeholder.com/50" /> <img class="image2" src="https://via.placeholder.com/100" /> < / div >

作为最简单的解决方案。那就是:

创建一个相对的div,放在页面的流中;将基本图像放在相对位置,这样div就知道它应该有多大;相对于第一张图片的左上方,将重叠图层放置在绝对位置。诀窍在于正确使用亲戚和绝对。