Html 如何在图像上放置图标？

如何在图像上放置下载图标？我希望它位于图像的左下角。当用户单击下载图标时，会出现一个提示，询问是否要下载图像

像这样：

相关代码

---

我认为您可以使用属性解决此问题。试试这个：

<img style="z-index: 1;" src="dog.png" alt="dog">

<a style="z-index:2" href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>

---

您需要在图像周围放置一个相对容器，然后将图标设置为position:

absolute

.container{position:relative；}
.container img{display:block；}
.container.fa下载{位置：绝对；底部：0；左侧：0；}

---

要覆盖两个元素，一种方法是创建父元素，然后覆盖

在这种情况下，这个示例应该可以工作，其中下载图标可以是任何元素，例如引导按钮

.img下载{
位置：相对位置；
}
.img下载>a{
位置：绝对位置；
背景：白色；
底部：0；
左：0；
}