我想在頭像圖片的右下角添加一個(gè)藍(lán)色點(diǎn)標(biāo)記，結(jié)果應(yīng)該如下所示。<avatar>
<img [src]="item.profilepic"/>
</avatar>可以在 HTML 中做到這一點(diǎn)嗎？
1 回答
汪汪一只貓
TA貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個(gè)贊
是的，這是可能的。你可以這樣做：
.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 標(biāo)簽，它看起來像這樣：
超文本標(biāo)記語(yǔ)言
<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;
}
- 1 回答
- 0 關(guān)注
- 170 瀏覽
添加回答
舉報(bào)
0/150
提交
取消