CSS：在图像上添加徽章以查看在线/离线状态

Question

如何向现有图像添加徽章以查看在线/离线状态？请看这里的例子。在右上角有一个灰点...我该怎么做？

非常感谢

Answer 1

将图标放在一个 div 中，该 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>