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

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

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

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

源

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

<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

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

通常，有一种很自然的方法可以做到这一点，那就是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的宽度和高度属性不允许单位;你可能会想到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;在宽度和高度属性可能会导致渲染引擎停滞。

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

.parent { 位置:相对; 上图:0; 左:0; ｝ .image1 { 位置:相对; 上图:0; 左:0; 边框:1px红色实体; } .image2 { 位置:绝对的; 上图:30 px; 左:30 px; 边框:1px绿色实体; } < div class = "父" > <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;"/>

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

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

这为每个元素提供了两个额外的层-因此将一个图像放置在另一个图像之上变得很容易-具有最小的语义标记(没有空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;
}

这里是一个现场演示

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

HTML

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

SASS

// 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-tags在该网格中的位置。如果将它们定义为位于网格的同一起点，则它们将重叠。在下面的例子中，两个图像重叠，一个在它们下面。

< span style=" font - family:宋体;Grid-template-columns: [first-col] 100%;Grid-template-rows:[第一行]300px"> <img src="https://fakeimg.pl/300/" style=" font - family:宋体;grid-row-start:板凳”> <img src="https://fakeimg.pl/300/" style=" font - family:宋体;grid-row-start:板凳”> < img src = " https://fakeimg.pl/300/ " > < / div >

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

Here is a solution that worked for me. Assuming all the images to be stacked are inside a div container, all you need to do is to set the display property of the div to flex. Don't set any position for the first image but for every other image, set the position property to absolute. Finally, use z-index to control the layers. You can set the first image's z-index to 1, the second image's z-index to 2, and so on (In my own case, I set the z-index of every other image apart from the first image to 2). If you want to center the images, you can set the justify-content property of the div to center to align the images horizontally to the center and adjust the top property to align the images vertically to the center. The values you use for the justify-content and top properties depend on the size of your images and whether the sizes are responsive on different devices or not. Here's my example:

img { 边框:2px纯红色; ｝ .img1n2 { 显示:flex; justify-content:中心; ｝ .img1 { z - index: 1; ｝ .img2 { 位置:绝对的; z - index: 2; 上图: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来满足您的特定需求。编码快乐!