我如何定位一个图像上另一个在HTML?

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

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

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

990275 次浏览
小开

最简单的方法是使用background-image，然后输入<在那个元素中。

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

小开

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

img {
position: absolute;
top: 25px;
left: 25px;
}
.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">

Source .

小开

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

<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

我怀疑Espo的解决方案可能不方便，因为它要求你完全定位两个图像。您可能希望第一个对象在流中定位。

通常，有一种很自然的方法可以做到这一点，那就是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>
小开

@buti-oxa:不是卖弄学问，但你的代码是无效的。HTML width和height属性不允许使用单位;你可能会想到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>

在width和height属性中保留px;可能会导致渲染引擎停滞。

小开
最佳答案

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

.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;
}
<div class="parent">
<img class="image1" src="https://via.placeholder.com/50" />
<img class="image2" src="https://via.placeholder.com/100" />
</div>

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

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

小开

我注意到一个可能导致错误的问题是，在rrichter的回答中，下面的代码:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

应该在样式中包含px单元。

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

除此之外，答案还不错。谢谢。

小开

你完全可以定位pseudo elements相对于它们的父元素。

这为每个元素提供了两个额外的层-因此将一个图像放置在另一个图像之上变得很容易-具有最小的语义标记(没有空div等)。

标记:

<div class="overlap"></div>

css:

.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;
}

这是一个< >强现场演示< / >强

小开

这可能有点晚了，但你可以这样做:

enter image description here

超文本标记语言

<!-- 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>

萨斯

// 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就知道它应该有多大;相对于第一张图片的左上方，将重叠图层放置在绝对位置。诀窍在于正确使用亲戚和绝对。

小开

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

你可以使用CSS-Grid，如果你想堆栈,重叠内容，这是一个非常方便的解决方案。首先需要定义网格。在那个格子里，你“告诉”;你的img标签在网格中的位置。如果将它们定义为位于网格的同一起点，则它们将重叠。在下面的例子中，两个图像重叠，一个在它们下面。

<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/">
</div>

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

小开
这是一个对我有用的解决办法。假设所有要堆叠的图像都在一个div容器中，你所需要做的就是将div的显示属性设置为flex。不要为第一张图像设置任何位置，但对于其他图像，将位置属性设置为绝对。最后，使用z-index来控制图层。你可以将第一张图片的z-index设置为1，第二张图片的z-index设置为2，以此类推(在我的例子中，我将除第一张图片外的所有其他图片的z-index设置为2)。如果你想将图片居中，你可以将div的justify-content属性设置为中心以使图片水平对齐到中心，并调整前属性以使图像垂直对齐到中心。用于justify-content和top属性的值取决于图像的大小，以及这些大小在不同设备上是否响应。 下面是我的例子:

img {
border: 2px solid red;
}


.img1n2 {
display: flex;
justify-content:center;
}


.img1 {
z-index: 1;
}


.img2 {
position: absolute;
z-index: 2;
top: 52.5%;
}
<div class="img1n2">
<img class="img1" src="https://fakeimg.pl/400/">
<img class="img2" src="https://fakeimg.pl/300/" width="100">
<img class="img2" src="https://fakeimg.pl/200/" width="50">
<img class="img2" src="https://fakeimg.pl/50/" width="30">
</div>

实际上，你可以用这个方法叠加一千或一百万张图像。您可以使用CSS来满足您的特定需求。编码快乐!


提交答案