分享模板插件精品好资源
现在位置:首页 > 网站设计 > 利用css生成首字母文字头像代码

利用css生成首字母文字头像代码

作者:蓝叶 分类:网站设计 时间:2022-12-17 浏览:1000

在做模版时为了美观好看,会在一些地方显示一些图片,通过代码获取文章中的图片来显示,而在文章中没有图片时,我们可以使用一张默认的图,总是搞这些默认的图不是很好看,这时我们可以用css来生成文章标题首字母的头像为图片,这样会不会看起来很美观,那么如何利用css生成首字母文字头像?

利用css生成首字母文字头像代码.png

利用css生成首字母文字头像代码

把下方的css代码复制到css文件中,html代码复制到需要的地方,就可以实现利用css生成首字母文字头像的功能,要注意中文与英文数字要设置不同搞的css样式,还需要把css样式复制一份改个名字,然后修改其中的text-indent和letter-spacing值,其它属性可按需求自行修改。

//css样式代码
.lanye-textavatar{
    width: 48px;
    height: 48px;
    line-height: 48px;
    background-color: #718af5;
    vertical-align: middle;
    overflow: hidden;
    font-size: 20px;
    text-indent: 11px;
    text-align: center;
    letter-spacing: 11px;
    color: #fff;
    border-radius: 60%;
}

//html调用代码
<div class="lanye-textavatar">蓝叶分享</div>

免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

评论列表
挤眼亲亲咆哮开心想想可怜糗大了委屈哈哈小声点右哼哼左哼哼疑问坏笑赚钱啦悲伤耍酷勾引厉害握手耶嘻嘻害羞鼓掌馋嘴抓狂抱抱围观威武给力
提交评论

清空信息
关闭评论