在 img 上带有图标的角标签

Question

我在 HTML 中有一个图像，当用户单击该图像时，我想在其上添加一个带有图标的角标签。

有人可以帮我创建一个 css 类，我可以给它一个带有图标的角标签，如附件中所示。

所以我的代码如下所示

<div> 
  <img src="blahblah.jpg">
  <img src="another.jpg" class="image-label">
  <i class="fa fa-heart"></i>
</div>

在这种情况下，第一张图片会正常显示。第二个将具有角标签/图标组合，如附图所示。

谁能告诉我image-labelcss 类会放置一个带有背景颜色（例如蓝色）的角，然后将字体真棒“心”图标放在该角标签/图标的中心，如图所示。

谢谢！

Answer 1

您显然使用了令人敬畏的心脏字体，因此不需要其他图像。使用 div 来保存图标并使用边框半径定位它

.image-container{
  width:200px;
  height:200px;
  position:relative;
  margin:100px;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-label{
  width:60px;
  height: 60px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:100%;
  background:skyblue;
  font-size:30px;
  position:absolute;
  top:0;
  right:0;
  transform:translate(50%,-50%);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
  <img src="https://www.gqmiddleeast.com/sites/default/files/gqme/styles/766_431_landscape/public/images/2019/06/12/Tony-Stark.jpg?itok=7-QNeRCi">
  <div class="image-label">
    <i class="fa fa-heart"></i>
  </div>
</div>

希望这会有所帮助！