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>

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

CSS: Add on image a badge to see the online / offline status

html

css

status

badge