html中如何设置重叠图片

在HTML中，可以通过CSS来实现图片的叠加显示，其中一种方法就是使用position属性。

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 设置层级，越大越在上面 */
}

.container {
  position: relative;
}

以上代码中，我们给想要叠加的图片设置position: absolute;，使其脱离文档流，并设置top和left属性来控制叠加位置。同时，通过z-index属性来控制层级关系，数值越大，图层越靠上。在叠加图片的容器上，设置position: relative;，这样子元素就可以使用绝对定位相对于容器进行定位，不会产生位置偏移。

接下来是完整示例代码：

<div class="container">
  <img src="img1.jpg" class="bottom">
  <img src="img2.jpg" class="overlay">
</div>

<style>
.container {
  position: relative;
}
.bottom {
  position: relative; /* 注意这里也要设置position属性 */
  z-index: 0;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>

上述代码中，我们使用了两张图片img1.jpg和img2.jpg来实现叠加效果。bottom类设置了相对定位和z-index属性，让其作为背景图片具有一定的层次感。overlay类的图片则使用给出的position和z-index属性，成为前景图片，将背景图片遮挡部分覆盖。

注意，使用这种方法时，应该给背景图片一个比前景图片更低的z-index值，以保证整个叠加图片的效果。