如何将一张图像放在另一张图像上？ [复制]答案

【问题标题】：How can I lay one image over another? [duplicate]如何将一张图像放在另一张图像上？ [复制]
【发布时间】：2019-04-22 07:10:14
【问题描述】：

我有这个 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/

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

【问题讨论】：

请把图像也放在小提琴中：D 你可以从“位置：绝对；右：0；底部：0；”开始

标签： html css

【解决方案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>

【讨论】：