img 上带有图标的角标签

Question

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

有人可以帮助我创建一个 css 类，我可以将其放在 上，为其添加一个带有附件所示图标的角标签。

所以我的代码如下所示

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

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

有人可以告诉我什么

image-label

css 类会放置一个带有背景颜色（例如蓝色）的角，然后将字体很棒的“心”图标放在该角标签/图标的中心，如图所示。

谢谢！

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>

希望这有帮助！