用户头像加载失败时,显示用户名首字符

在这里插入图片描述


实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        img {
            display: inline-block;
            width: 60px;
            height: 60px;
            border: 1px solid black;
            vertical-align: middle;

            /* 隐藏超出盒子的内容,包括默认的破损图标和alt文字 */
            overflow: hidden;
        }

        img::before {
            content: attr(alt);
            width: 100%;
            background-color: #fde3cf;
            color: rgb(245, 106, 0);;


            /* 把默认的破损图片和alt文字挤出去 */
            height: 100%;

            /* 增加字符的间距,把字符顶出盒子外,让文字换行,每行显示一个字符 */
            letter-spacing: 60px;

            /* 行高和图片高度一致,首文字垂直居中 */
            line-height: 60px;

            /* 文字缩进,让首字符左右两边间距一样, 需要块级元素属性才生效 */
            text-indent: 60px;
            /* 首字母水平居中 */
            display: flex;
            justify-content: center;

            /* 每个字符一行,中文超出容器会自动换行,这里用于处理连续英文字符 e.g. lilei */
            word-break: break-all;

            /* 英文首字母大写 */
            text-transform: capitalize;

            /* 处理特殊符号,导致布局混乱 */
            /*
                中文特殊符号:避首符号、避尾符号

                避首符号:如。  。默认不能出现在一行的开头,如果刚好到了。就换行了,那么下一行会是
                e.g.   ....一句话。    换行后会把前面一个字带下去,即使上一行还可以放下一个中文字符
                    ....一句  
                    话。
             */
            line-break: anywhere; /* 忽略任意符号,任意位置都可换行 */
        }
    style>
head>
<body>
    <img src="https://gw.alipayobjects.com/zos/rmsportal/UTjFYEzMSYVwzxIGVhMu.png" alt="李雷">
    <img src="https://Mu.png" alt="李雷">
    <img src="" alt="李雷">
    <img src="" alt="lilei">

    <img src="" alt="l——ilei()">
    <img src="" alt="lilei()">
    <img src="" alt="lilei(李雷)">
body>
html>

参考文章

CSS 实现头像名称首字符自动占位

你可能感兴趣的:(CSS,css)