如何将一个图像放置在另一个图像上？

Question

我有以下HTML布局：

<div class="profile-img">
    <img src="https://via.placeholder.com/150">
</div>

使用此CSS

.profile-img, .profile-img > img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

这是我的JS小提琴：

https://jsfiddle.net/wsho4vq7/

我现在要做的是将附加的图像添加到圆形图像的右下角。...我该如何处理并使右下角的图像可单击？

Answer 1

我建议您将辅助映像放置为.profile-img的子映像。从这里开始，提供.camera图像position: absolute和父元素.profile-img元素position: relative。这将允许您通过使用bottom和right将子元素放在右下角。在我的示例中，我都选择了15px，但可以随时进行调整以适合自己。您还可以使用负值！

要使图像可点击，您可以使用cursor: pointer（以增强效果）和一些自定义JavaScript事件处理程序，也可以将<img>包装在<a>标记中如果您想重定向。

这可以在下面看到：

.profile-img,
.profile-img > .placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
}

.camera {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

<div class="profile-img">
  <img class="placeholder" src="https://via.placeholder.com/150">
  <a href="https://www.google.com">
    <img class="camera" src="https://i.stack.imgur.com/lPMJf.png">
  </a>
</div>