html - 在图像上叠加图像

Question

我是 css 新手，并试图让一个图像多次覆盖另一个图像。所以橙色点覆盖了图像。多张图片在同一个地方。

代码

标签： html

Answer 1

所以你需要的是使用 cssposition属性。

给父元素position: relative和覆盖的子元素position: absolute，然后使用left和top属性使用确切的位置。

应该是这样的：

.parent {
  position: relative;
  display: inline-block;
}
.badge {
  position: absolute;
  left: 10px;
  top: 10px;
}

<div class="parent">
  <img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  <img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
  <img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  <img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
  <img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  <img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>