CSS：在图像上添加一个包，以查看在线/离线状态

Question

如何添加徽章以查看在线/离线状态？请在此处查看示例。在右上角有一个灰色的点...我该怎么办？

非常感谢

Answer 1

将图标放在div中，它将包含图标和状态元素，像这样

.icon-container {
  width: 50px;
  height: 50px;
  position: relative;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: grey;
  border: 2px solid white;
  bottom: 0;
  right: 0;
  position: absolute;
}

<div class='icon-container'>
  <img src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png" />
  <div class='status-circle'>
  </div>
</div>