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

【问题标题】：CSS Create Avatar Images with Check mark (Verified)CSS 创建带有复选标记的头像图像（已验证）
【发布时间】：2021-05-03 01:10:36
【问题描述】：

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

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

&lt;img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar"&gt;

如何使用 Css 或 Tailwind： Avatar ScreenShot

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

您可以在一个 div 中添加使用包装图像并添加跨度以显示复选标记

.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>

【讨论】：

【解决方案2】：

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

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

height: 100%;
width: 100%;

由于容器是相对定位的，所以可以将验证标记设置为position: absolute;并在右下角点亮。

附上sn-p :)

.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>

【讨论】：

【解决方案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>

【讨论】：