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

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

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


当前回答

简单的方法是使用background-image,然后在该元素中放入<img>。

另一种方法是使用css图层。有大量的资源可以帮助你做到这一点,只要搜索css图层。

其他回答

内联样式只是为了清晰起见。使用真正的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>

这是我所做的使一个图像漂浮在另一个图像上的一个粗略的观察。

img { 位置:绝对的; 上图:25 px; 左:25 px; } .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">

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

简单的方法是使用background-image,然后在该元素中放入<img>。

另一种方法是使用css图层。有大量的资源可以帮助你做到这一点,只要搜索css图层。

@buti-oxa:不是卖弄学问,但你的代码是无效的。HTML的宽度和高度属性不允许单位;你可能会想到CSS的width:和height:属性。你还应该提供一个content-type (text/css;参见Espo的代码)使用<style>标记。

<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;在宽度和高度属性可能会导致渲染引擎停滞。