我是Rails编程的初学者，试图在页面上显示许多图像。 有些图像要放在其他图像之上。 为简单起见，假设我要一个蓝色正方形，在蓝色正方形的右上角有一个红色正方形(但在角落不紧)。 由于性能问题，我试图避免进行合成(使用ImageMagick等)。
我只想相对于彼此放置重叠的图像。
举一个更困难的例子，想象一下将里程表放在更大的图像中。 对于六位数字，我将需要合成一百万个不同的图像，或者即时进行处理，其中所需要做的就是将这六个图像放置在另一个图像之上。
好的，过了一段时间，这就是我的目标：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .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;
} |
1
2
| <img class ="image1" src ="https://placehold.it/50" / >
<img class ="image2" src ="https://placehold.it/100" / > |
作为最简单的解决方案。那是：
创建一个放置在页面流中的相对div；首先将基本图像作为相对图像放置，以便div知道应该有多大；将叠加层相对于第一张图片的左上角作为绝对值放置。诀窍是使亲戚和绝对人正确。
这是我为使一个图像浮动到另一个图像所做的准系统研究。
1
2
3
4
5
6
7
8
9
10
11
| img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
} |
1
2
| <img class ="imgA1" src ="https://placehold.it/200/333333">
<img class ="imgB1" src ="https://placehold.it/100"> |
资源
以下代码可能会给您一些想法：
1
2
3
4
5
6
7
8
| <style >
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style >
<img border="0" src ="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.webp" alt =""">
<img class="cornerimage " border="0" src="http ://www .gravatar.com/avatar/ " alt=""> |
JSFiddle
我怀疑Espo的解决方案可能不方便，因为它要求您绝对放置两个图像。您可能希望第一个在流程中定位自己。
通常，CSS是一种自然的方法。您将position：relative放置在容器元素上，然后将子元素绝对放置在其中。不幸的是，您不能将一个图像放入另一个图像。这就是为什么我需要容器div。注意，我使它成为浮动对象以使其自动适应其内容。使其显示：从理论上讲，内联块也应该可以工作，但是那里的浏览器支持很差。
编辑：我删除了图像的大小属性，以更好地说明我的观点。如果希望容器图像具有其默认大小，并且事先不知道该大小，则不能使用背景技巧。如果这样做，则是更好的方法。
我注意到可能会导致错误的一个问题是，在rrichter的答案中，以下代码：
1
| <img src="b.webp" style="position: absolute; top: 30; left: 70;"/> |
应该在样式中包含px单位，例如。
1
| <img src="b.webp" style="position: absolute; top: 30px; left: 70px;"/> |
除此之外，答案很好。谢谢。
您可以相对于其父元素绝对定位pseudo elements。
这为您提供了两个额外的图层，可用于每个元素-因此将一个图像放置在另一个图像上变得容易-具有最少的语义标记(没有空div等)。
标记：
CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .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;
} |
这是现场演示
内联样式仅是为了此处清晰。使用真实的CSS样式表。
1
2
3
4
5
6
7
8
9
| <! -- First , your background image is a DIV with a background
image style applied , not a IMG tag. -->
<! -- Second , create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<! -- 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;"/ > |
最简单的方法是使用背景图片，然后在该元素中放入![]()
。
另一种方法是使用css层。有大量资源可以帮助您解决此问题，只需搜索CSS图层即可。
可能有些晚了，但是您可以这样做：
的HTML
1
2
3
4
5
6
| <! -- html -->
<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" / > |
萨斯
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| // 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知道应该有多大；将叠加层相对于第一张图片的左上角作为绝对值放置。诀窍是使亲戚和绝对人正确。
@ buti-oxa：不必脚，但您的代码无效。 HTML width和height属性不允许使用单位。您可能会想到CSS width:和height:属性。您还应该提供带有
