CSS 实现文字头像（圆角头像文字内容）

先上效果图。

在这里插入图片描述

关键css：

.avatar-container {
    height: 1.5rem;
    width: 1.5rem;
    display: inline-block;
    background: #aaaaaa;
    text-align: center;
    border-radius: 0.75rem;
}

.avatar-content {
    margin-top: 0.25rem;
    display: block;
}

其实本来想直接生成一张图片来着，后来发现js直接生成图片的效果不是很好，基本都是要用 canvas，效果、性能都是问题。

后来发现自己真实傻，直接用css做一个出来不就行啦。

原理就是，一个div作为外壳，设置圆角，设置背景。把文字内容居中，OK了。

以下是例子的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Avatar Test</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            background: #F6F6F6;
            color: #555555;
            overflow-x: hidden;
            position: relative;
            padding-bottom: 2.1rem;
            font-family: "微软雅黑", arial;
            line-height: 1.6;
            font-size: 16px;
        }

        .address-box {
            background-color: #FFFFFF;
            margin: 0.4rem 0.2rem 0.4rem 0.2rem;
            border-radius: 5px;
            padding-left: 0.4rem;
            padding-bottom: 0.2rem;
        }

        .address-box-up {
            padding-top: 0.6rem;
            font-weight: 700;
        }

        .avatar-container {
            height: 1.5rem;
            width: 1.5rem;
            display: inline-block;
            background: #aaaaaa;
            text-align: center;
            border-radius: 0.75rem;
        }

        .avatar-content {
            margin-top: 0.25rem;
            display: block;
        }

        .user-name {
            margin-left: 0.4rem;
        }

        .address-box-middle {
            font-weight: 700;
            margin-top: 0.2rem;
            margin-bottom: 0.2rem;
        }

        .address-box-down {
            font-size: 0.55rem;
            color: #aaaaaa;
        }

        .address-box-down img {
            position: relative;
            top: -1rem;
            height: 1rem;
            float: right;
            right: 0.5rem;
        }

        .address-box-down span {
            display: block;
            margin-right: 2rem;
        }
    </style>

    <script type="text/javascript">
        function setRem() {
            var html = document.documentElement;
            var hWidth = html.getBoundingClientRect().width;
            html.style.fontSize = hWidth / 16 + 'px';
        }

        setRem();
    </script>
</head>
<body>

<div class="address-box">
    <div class="address-box-up">
        <div class="avatar-container"><span class="avatar-content">亮</span></div>
        <span class="user-name">诸葛亮</span>
    </div>
    <div class="address-box-middle">
        <span>18888886666</span>
    </div>
    <div class="address-box-down">
        <span>四川省成都市武侯区 武侯大道南段150号</span>
    </div>
</div>


<div class="address-box">
    <div class="address-box-up">
        <div class="avatar-container"><span class="avatar-content">亮</span></div>
        <span class="user-name">诸葛亮</span>
    </div>
    <div class="address-box-middle">
        <span>18888886666</span>
    </div>
    <div class="address-box-down">
        <span>四川省成都市武侯区 武侯大道南段150号</span>
    </div>
</div>


<div class="address-box">
    <div class="address-box-up">
        <div class="avatar-container"><span class="avatar-content">亮</span></div>
        <span class="user-name">诸葛亮</span>
    </div>
    <div class="address-box-middle">
        <span>18888886666</span>
    </div>
    <div class="address-box-down">
        <span>四川省成都市武侯区 武侯大道南段150号</span>
    </div>
</div>


<div class="address-box">
    <div class="address-box-up">
        <div class="avatar-container"><span class="avatar-content">亮</span></div>
        <span class="user-name">诸葛亮</span>
    </div>
    <div class="address-box-middle">
        <span>18888886666</span>
    </div>
    <div class="address-box-down">
        <span>四川省成都市武侯区 武侯大道南段150号</span>
    </div>
</div>

</body>
</html>

Bottle

发布了118 篇原创文章 · 获赞 55 · 访问量 113万+

他的留言板关注

CSS 实现文字头像（圆角头像文字内容）

猜你喜欢