仅限 CSS Tailwind CSS 头像，用于个人资料图像。尺寸为 xs-xl，组堆叠和在线/离线状态指示器。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
Avatar 组件在一个紧凑的、可定制的容器中显示用户个人资料图像或姓名首字母。头像使用 Frutjam 的 CSS 自定义属性构建，代表界面上的用户、贡献者或团队成员。头像系统支持图像和文本、多种尺寸、颜色、形状、状态指示器、环和组排列，非常适合用户列表、评论、团队显示、个人资料部分和消息传递界面。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| avatar | 根据 | 带有缩写或图像的圆形头像容器 |
| avatar-group | 修饰符 | 多个头像重叠堆叠 |
| avatar-ring | 修饰符 | 在头像周围添加彩色环形边框 |
| avatar-circle | 风格 | 全圆形（默认） |
| avatar-rounded | 风格 | 圆角矩形形状 |
| avatar-square | 风格 | 方形，无圆角 |
| avatar-online | 风格 | 绿色在线状态指示灯 |
| avatar-away | 风格 | 黄色离开状态指示灯 |
| avatar-busy | 风格 | 红色忙状态指示灯 |
| avatar-offline | 风格 | 灰色离线状态指示灯 |
| avatar-xs | 尺寸 | 特小号 |
| avatar-sm | 尺寸 | 小的 |
| avatar-md | 尺寸 | 中（默认） |
| avatar-lg | 尺寸 | 大的 |
| avatar-xl | 尺寸 | 特大号 |
| avatar-2xl | 尺寸 | 2x 超大号 |
| avatar-primary | 颜色 | 主要主题颜色 |
| avatar-secondary | 颜色 | 次要主题色 |
| avatar-accent | 颜色 | 强调主题颜色 |
| avatar-neutral | 颜色 | 中性主题色 |
| avatar-info | 颜色 | 信息语义颜色 |
| avatar-success | 颜色 | 成功语义色 |
| avatar-warning | 颜色 | 警告语义颜色 |
| avatar-error | 颜色 | 错误语义颜色 |
| avatar-ring-primary | 颜色 | 原色戒指 |
| avatar-ring-secondary | 颜色 | 辅助色戒指 |
| avatar-ring-accent | 颜色 | 戒指采用强调色 |
| avatar-ring-neutral | 颜色 | 中性色戒指 |
| avatar-ring-info | 颜色 | 信息颜色的戒指 |
| avatar-ring-success | 颜色 | 成功颜色戒指 |
| avatar-ring-warning | 颜色 | 警告色环 |
| avatar-ring-error | 颜色 | 戒指颜色错误 |
基本用法
使用文本缩写或颜色创建简单的头像。
AB
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
头像与图像
通过自动图像调整和响应式尺寸调整来显示用户个人资料照片。
html
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
头像尺寸
使用尺寸变体将头像从超小 (xs) 缩放到 2 倍大 (2xl)，以适应不同的环境。
XS
SM
MD
LG
XL
2XL
html
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
头像颜色
不使用图像时，应用颜色变体以按角色、团队或状态区分化身。
A
B
C
D
E
F
G
H
html
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
头像形状
选择圆形（默认）、圆形或方形形状以匹配您的设计系统。
●
◇
■
html
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
带有姓名缩写的头像
显示用户姓名缩写，以便在列表、评论线程和团队部分中快速识别。
JD
AR
MS
KL
html
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
带有状态指示器的头像
将头像与状态徽章相结合，以显示用户的状态或可用性（在线、离线、忙碌、离开）。
JD
AR
MS
KL
html
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
带有环形边框的头像
在头像周围添加装饰环以强调、突出地位或视觉分隔。
A
B
C
html
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
戒指颜色变体
选择独立于头像背景颜色的戒指颜色。
A
B
C
D
E
F
G
html
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
阿凡达集团
使用自动负边距堆叠多个头像，以重叠显示团队成员和协作者。
A
B
C
D
html
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
不同大小的头像组
将多个尺寸组合到一个组中以实现视觉层次结构。
A
B
C
html
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
具有状态的头像组
显示团队组中每个成员的空闲状态。
A
B
C
html
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
组合变体
混合并匹配尺寸、颜色、形状、状态和戒指修饰符，以实现复杂的头像显示。
SK
AB
MR
html
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 阿凡达 类名称和结构。不再有幻觉课程。