html如何在图片添加图片

在HTML中，我们无法直接在图片上添加图片，我们可以使用CSS的position属性和zindex属性来实现这个效果，以下是详细的步骤：

1、我们需要创建两个img标签，一个用于显示背景图片，另一个用于显示要添加到背景图片上的小图片。

<div class="imagecontainer">
    <img src="background.jpg" alt="Background Image">
    <img src="smallimage.png" alt="Small Image">
</div>

2、我们需要为这两个img标签添加一些CSS样式，我们将背景图片设置为绝对定位，并将其放置在容器的底部，我们将小图片设置为相对定位，并将其放置在背景图片的顶部，这样，小图片就会看起来像是覆盖在背景图片上。

.imagecontainer {
    position: relative;
    width: 500px;
    height: 500px;
}
.imagecontainer img {
    width: 100%;
    height: 100%;
    position: absolute;
}
.imagecontainer img:firstchild {
    zindex: 2;
}

3、我们需要调整小图片的位置，使其与背景图片对齐，我们可以通过调整小图片的top和left属性来实现这一点，如果我们想要将小图片放在背景图片的中心，我们可以这样做：

.imagecontainer img:firstchild {
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%);
}

以上就是在HTML中在图片上添加图片的方法，需要注意的是，这种方法只适用于背景图片和小图片大小相同的情况，如果它们的大小不同，你可能需要使用JavaScript或者更复杂的CSS技巧来调整它们的位置和大小。