如何在 HTML 中将一张图像放置在另一张图像之上?
-
09-06-2019 - |
题
我是 Rails 编程的初学者,尝试在页面上显示许多图像。有些图像要放在其他图像之上。为了简单起见,假设我想要一个蓝色方块,在蓝色方块的右上角有一个红色方块(但不要紧在角落)。由于性能问题,我试图避免合成(使用 ImageMagick 等)。
我只想将重叠的图像相对于彼此定位。
作为一个更困难的示例,想象一下将里程表放置在更大的图像内。对于六位数字,我需要合成一百万个不同的图像,或者全部即时完成,所需要做的就是将六个图像放在另一个图像之上。
解决方案
好吧,过了一段时间,这就是我的发现:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
}
<div class="parent">
<img class="image1" src="https://placehold.it/50" />
<img class="image2" src="https://placehold.it/100" />
</div>
作为最简单的解决方案。那是:
创建一个放置在页面流程中的相对div;将基本图像作为相对位置首先放置,以便 div 知道它应该有多大;将叠加层放置为相对于第一张图像的左上角的绝对值。诀窍是让相对值和绝对值正确。
其他提示
这是我将一张图像浮动在另一张图像上所做的简单介绍。
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
以下代码可能会给您带来想法:
<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>
我怀疑 埃斯波的解决方案 可能会很不方便,因为它需要您绝对定位两个图像。您可能希望第一个将自己定位在流程中。
通常,有一种自然的方法可以做到这一点,那就是 CSS。你放置位置:相对于容器元素,然后将子元素绝对定位在其中。不幸的是,您无法将一张图像放入另一张图像中。这就是我需要容器 div 的原因。请注意,我将其设置为浮动以使其自动适应其内容。使其显示:inline-block 理论上应该也可以工作,但是浏览器支持很差。
编辑:我从图像中删除了尺寸属性,以更好地说明我的观点。如果您希望容器镜像具有默认大小并且您事先不知道大小,则不能使用 背景技巧. 。如果你这样做,这是一个更好的方法。
我注意到可能导致错误的一个问题是,在 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;
}
这是一个 现场演示
最简单的方法是使用背景图像,然后在该元素中放置一个 <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>
@buti-oxa:不是迂腐,但您的代码无效。超文本标记语言 width
和 height
属性不允许使用单位;你可能会想到 CSS width:
和 height:
特性。您还应该提供内容类型(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;
在里面 width
和 height
属性可能会导致渲染引擎犹豫不决。
可能有点晚了,但为此你可以这样做:
超文本标记语言
<!-- 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;
}
}
}