共计 3020 个字符，预计需要花费 8 分钟才能阅读完成。
在 web 中常常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：
实际效果能够查看 CSS avator(codepen.io)，那么如何通过 CSS 实现这一成果呢?
一、图片加载失败时的占位
古代浏览器（Chrome、Firefox）img 标签都反对伪元素了，不过只有当图片加载失败的时候能力看到
<img class="avator" src="https://tva1.sinaimg.cn/large/008i3skNgy1grgo8qjty1j30e80e8aad.jpg">
<img class="avator" src="">.avator::before{
content: '我是伪元素';
color: red;
}成果如下
有了伪元素，要做一些事件就很不便了，比方将默认的“占位图”挤出去，设置伪元素高度为 100% 就行了，同时设置超出暗藏
.avator{
width: 40px;
height: 40px;
overflow: hidden; /* 记得超出暗藏 */
}
.avator::before{
content: '';
display: flex;
background: bisque;
height: 100%;
}成果如下
二、alt 首字符占位
个别在应用 img 标签时都举荐加上 alt 属性，用来形容图片信息，也十分合乎语义化。
<img class="avator" src=""alt="xboxyan">而后在图片加载失败时，能够通过 attr获取到残缺的 alt 信息
.avator::before{content: attr(alt); /* 获取 alt 属性 */
color: rgb(250, 84, 28);
}为了不便演示，这里临时把超出暗藏关上
那么，如何只显示第一个字符呢？
尝试了一下 ::first-letter，发现不起作用， 伪元素外面不能再用伪元素了
.avator::before::first-letter{/* 有效 */}须要换一种思路，比方 减少字符间距，让其余字符都处于容器之外
.avator::before{
/**/
letter-spacing: 40px;
}成果如下
这样一来，首字符“x”的确处于眼帘之中了。
不过新问题也来了，如何让首字符程度垂直居中呢？
三、首字符程度垂直居中
垂直居中比拟好办。设置行高就行了
.avator::before{
/**/
line-height: 40px;
}
程度居中貌似有些辣手，不过施展你的奇思妙想，问题还是能够解决的！
首先，因为宽度限度，能够把所有的字符强制换行，保障每个字符都处于独自一行，首行也不另外
.avator::before{
/**/
word-break: break-all; /* 换行 */
}
后面咱们加了一个字符间距，然而字符间距是追随在字符前面的，所以第一个字符的后面是没有间距的。为了放弃首行左右均衡，所以手动加上同样的间距 ，这里采纳text-indent 来实现
.avator::before{
/**/
text-indent: 40px; /* 首行缩进 */
}
这样对于首行来说，其实是左右边距是一样的。接下来，通过 flex 布局居中就能够了
.avator::before{
/**/
display: flex;
justify-content: center; /* 程度居中 */
}
对于英文字母来说，可能须要转成大写
.avator::before{
/**/
text-transform: capitalize; /* 首字母大写 */
}而后超出暗藏看看成果吧
四、特殊符号的影响
起初测试中，发现了另外一个问题，当 alt 中有一些非凡标点符号时，首字符会隐没不见
<img class="avator" src=""alt="xboxyan（测试）">关上暗藏其实是这样的
是不是看着一团糟？其实就是一些 闭尾标点 惹的祸！比方这里的(，默认状况下是不容许呈现在一行的开端的，所以强制换到了下一行，导致整个布局错乱。为了解决这个问题，能够应用一个比拟冷门的 CSS 属性 line-break – CSS（层叠样式表）| MDN (mozilla.org) 来解决，有趣味的能够参考张鑫旭的这篇文章：CSS line-break 属性与中文标点换行
.avator::before{
/**/
line-break: anywhere; /* 任意中央都换行 */
}这下就没问题了，都是整整齐齐的换行~
上面整顿一下，附上残缺代码
<ul class="list">
<li class="item">
<img class="avator" src="https://tva1.sinaimg.cn/large/008i3skNgy1grgo8qjty1j30e80e8aad.jpg" alt="xboxyan">
xboxyan
</li>
<li class="item">
<img class="avator" src=""alt="xboxyan">
xboxyan
</li>
<li class="item">
<img class="avator" src=""alt=" 前端侦探 ">
前端侦探
</li>
<li class="item">
<img class="avator" src=""alt=" 体验设计部 ">
体验设计部
</li>
</ul>.list{
list-style: none;
padding: 0;
}
.avator{
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
background: bisque;
}
.avator::before{content: attr(alt);
display: flex;
width: 100%;
height: 100%;
background-color: bisque;
text-transform: uppercase;
line-height: 40px;
letter-spacing: 40px;
text-indent: 40px;
justify-content: center;
text-align: center;
/* word-break: break-all; */
line-break: anywhere;
color: rgb(250, 84, 28);
}
.item{
display: flex;
align-items: center;
gap: 15px;
height: 64px;
font-size: 18px;
}成果如文章结尾所示，有须要的能够间接用起来了
或者拜访线上链接 CSS avator(codepen.io) 或者 CSS avator (juejin.cn)
五、总结一下
以上就是本文的全部内容了，非常简单实用的一个小性能，上面简略总结一下
- 古代浏览器反对 img 伪元素了，并且只有在资源加载失败时才可用，利用这一点能够设置图片占位符
- 伪元素通过 attr 属性能够获取 img 标签属性，举荐应用 alt
- 伪元素不能再应用伪类了
- 减少字符的行间距能够在可视范畴内仅看到一个字符
- 垂直居中能够通过行高来实现
- 程度居中能够通过首行缩进 和 flex 居中实现
- 局部特殊符号因为“避尾”或者“避首”个性，导致换行布局错乱
- line-break 能够突破以上规定
惟一的遗憾就是 Safari 不反对图片伪元素，不过没关系，不影响性能，也能够学到一些你可能不晓得的小技巧。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
