css圆形头像叠加样式

最新推荐文章于 2026-06-26 17:26:33 发布

原创最新推荐文章于 2026-06-26 17:26:33 发布 · 3.8k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

当前文章被收录于：

css

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

在这里插入图片描述
通过图片叠加完成

<!-- body -->
<div class="avatar-list-stacked">
	<span class="avatar" style="background: url(https://blog.csdn.net/'/images/head1.png') center center;background-repeat:no-repeat;background-size: cover; background-position:0px 0px;  "></span>
	<span class="avatar" style="background: url(https://blog.csdn.net/'/images/head2.png') center center;background-repeat:no-repeat;background-size: cover; background-position:0px 0px;  "></span>
	<span class="avatar" style="background: url(https://blog.csdn.net/'/images/head3.png') center center;background-repeat:no-repeat;background-size: cover; background-position:0px 0px;  "></span>
</div>

.avatar-list-stacked .avatar {
    box-shadow: 0 0 0 1px #fff;
}
.avatar-list-stacked .avatar {
    margin-right: -1.9em !important;
}
.avatar {
    width: 5rem;
    height: 5rem;
    line-height: 20rem;
    display: inline-block;
    background: #2ddcd3 no-repeat center/cover;
    position: relative;
    text-align: center;
    color: #fff;
    font-weight: 600;
    vertical-align: bottom;
    font-size: .875rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	border-radius: 50%;
}