html - 如何将一张图像放在另一张图像上？

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/

我现在要做的是将附加图像添加到圆形图像的右下角......我将如何去做并使右下角的图像可点击？

标签： htmlcss

Answer 1

我建议将您的次要图像作为.profile-img. 从这里，给出.camera图像position: absolute和父.profile-img元素position: relative。bottom这将允许您通过使用and将子元素定位在右下角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>