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

Question

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

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

可以在 HTML 中做到这一点吗？

Answer 1

是的，这是可能的。你可以这样做：.avatar {&nbsp; &nbsp; height: 256px;&nbsp; &nbsp; width: 256px;&nbsp; &nbsp; position: absolute;}.dot {&nbsp; &nbsp; height: 25px;&nbsp; &nbsp; width: 25px;&nbsp; &nbsp; border-radius: 100%;&nbsp; &nbsp; background: blue;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; right: 25px;&nbsp; &nbsp; bottom: 25px;}<div class="avatar">&nbsp; &nbsp; <img src="http://aux2.iconspalace.com/uploads/smile-icon-256.png">&nbsp; &nbsp; <div class="dot"></div></div>使用 Ionic 标签，它看起来像这样：超文本标记语言<ion-avatar>&nbsp; &nbsp; <img src="http://aux2.iconspalace.com/uploads/smile-icon-256.png"/>&nbsp; &nbsp; <div class="dot"></div></ion-avatar>CSSion-avatar {&nbsp; height: 256px;&nbsp; width: 256px;&nbsp; position: absolute;}.dot {&nbsp; height: 25px;&nbsp; width: 25px;&nbsp; border-radius: 100%;&nbsp; background: blue;&nbsp; position: absolute;&nbsp; right: 25px;&nbsp; bottom: 25px;}