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

Question

我想在头像图片的右下角添加一个蓝色点标记，结果应该如下所示。<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 标签，它看起来像这样：

超文本标记语言

<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;

}