CSS 实现文字头像(圆角头像文字内容)

先上效果图。

CSS 实现文字头像(圆角头像文字内容)_第1张图片

关键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了。

以下是例子的完整代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Avatar Testtitle>
    <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>18888886666span>
    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>18888886666span>
    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>18888886666span>
    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>18888886666span>
    div>
    <div class="address-box-down">
        <span>四川省成都市武侯区 武侯大道南段150号span>
    div>
div>

body>
html>

你可能感兴趣的:(杂)