我是一名Rails编程的初学者，尝试在页面上展示许多图片。有些图像需要放置在另一些图像之上。为了简单起见，假设我想要一个蓝色正方形，在蓝色正方形的右上角放置一个红色正方形（但不要贴在角落里）。由于性能问题，我试图避免使用合成技术（如ImageMagick等）。
我只想相对定位重叠的图像。
更难的例子是，在较大的图像中放置一个里程表。对于六个数字，我需要合成一百万个不同的图像，或者在运行时完成所有操作，只需要将六个图像放置在另一个图像上面即可。
13个回答
1
将背景大小设置为cover。然后用另一个div包装你的div，现在在父div上设置最大宽度。
<div style="max-width:100px">
<div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>
- Howdy
0
@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>
在 width 和 height 属性中保留 px; 可能会导致渲染引擎出现问题。
- Soeren Kuklau
0
创建一个相对定位的 div，使其在页面流中占据位置；首先将基础图像设置为相对定位，以便 div 知道它应该有多大；将覆盖层作为绝对定位放置在第一张图像的左上角。关键是要正确使用相对定位和绝对定位。
- Pallavi Singh
1
4我认为提供一个可能的代码示例可以帮助未来阅读本答案的读者。 - entpnerd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接