html叠加图片代码

在网页设计中，叠加图片是一个非常常见的技巧，可以提高网页的视觉效果和美观度。HTML语言中，我们可以使用叠加图片的代码实现这个效果。

<div>
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
</div>

上述代码中，我们使用了<div>标签来包裹两个<img>标签。当这两张图片叠加显示时，按照代码中的先后顺序显示。也就是说，代码中先显示的图片会显示在后面图片的下面，后面图片会覆盖掉前面图片的一部分。

如果我们想要设置两张图片的叠加位置，可以使用CSS中的position属性。具体的代码如下：

<div style="position:relative;">
  <img src="image1.jpg" alt="image1" style="position:absolute;top:0;left:0;">
  <img src="image2.jpg" alt="image2" style="position:absolute;top:50px;left:50px;">
</div>

上述代码中，我们在<div>标签上设置了position:relative属性，表示这个元素的定位是相对于默认位置。然后，在两个<img>标签中，我们设置了position:absolute属性，表示这个元素的定位是相对于其最近的定位父元素。在第一个<img>标签中，我们设置了top:0和left:0，表示这个元素的位置是相对于其父元素的左上角；在第二个<img>标签中，我们设置了top:50px和left:50px，表示这个元素的位置是在父元素的左上角向下50px和向右50px的位置。

这样，我们就可以通过HTML语言和CSS代码实现图片的叠加效果。