CSS 创建带有复选标记的头像图像（已验证）

Question

在头像中，我想通过CSS为图像添加验证图标。示例：

 .avatar { vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; }

<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar">

如何使用 Css 或 Tailwind： Avatar ScreenShot

Answer 1

您可以在一个 div 中添加使用环绕图像并添加 span 以显示复选标记

.avatar-wrap {
  width: 50px; 
  height: 50px;
  position: relative;
}
.avatar { 
  vertical-align: middle; 
  width: 50px; 
  height: 50px; 
  border-radius: 50%;
}

.avatar-wrap span {
  position: absolute;
  bottom: 0;
  right: 0;
  background: deepskyblue;
  border-radius: 100%;
  color:#fff;
  width: 15px;
  height: 15px;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="avatar-wrap">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar">
  <span><i class="fas fa-check"></i></span>
</div>

Answer 2

我建议将图片和验证标记都放在相对定位的父容器中。

这样，您可以将图像的大小设置为：

height: 100%;
width: 100%;

由于货柜是相对定位的，可以将验证标志设为position: absolute;，然后在右下角下车

附上片段:)

.avatar-wrapper {
  position: relative;
  width: 50px;
  height: 50px;
}

.avatar {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.verified-avatar-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: aqua;
  width: 15px;
  height: 15px;
  
  //style for inner text
  display: grid;
  text-align: center;
  line-height: 15px;
  color: white;
  font-size: 10px;
  font-weight: bolder;
}

<div class="avatar-wrapper">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar">
  <div class="verified-avatar-icon">✓</div>
</div>

Answer 3

对于 TailwindCSS 解决方案：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="relative w-12 h-12">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
  <div class="absolute w-4 h-4 right-0 bottom-0 rounded-full bg-blue-400 text-white text-xs text-center leading-4">✓</div>
</div>

CSS 创建带有复选标记的头像图像（已验证）

CSS Create Avatar Images with Check mark (Verified)

html

css

tailwind-css