如何在HTML的头像图片上添加点标记？

Question

我想在头像img的右下角添加一个蓝色的点标记，结果应如下所示。

<avatar>
    <img [src]="item.profilepic"/>
</avatar>

是否可以用HTML做到这一点？

Answer 1

是的，有可能。您可以这样做：

.avatar {
    height: 256px;
    width: 256px;
    position: absolute;
}
.dot {
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: blue;
    position: absolute;
    right: 25px;
    bottom: 25px;
}

<div class="avatar">
    <img src="http://aux2.iconspalace.com/uploads/smile-icon-256.png">
    <div class="dot"></div>
</div>

带有Ionic标签，它看起来像这样：

HTML

<ion-avatar>
    <img src="http://aux2.iconspalace.com/uploads/smile-icon-256.png"/>
    <div class="dot"></div>
</ion-avatar>

CSS

ion-avatar {
  height: 256px;
  width: 256px;
  position: absolute;
}
.dot {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: blue;
  position: absolute;
  right: 25px;
  bottom: 25px;
}