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>

CSS 实现文字头像（圆角头像文字内容）相关推荐

纯CSS实现兼容ie6以上的圆角头像
先贴下各种浏览器下的效果图: 1.IE6 2.IE7 3.Chrome <!DOCTYPE html> <html xmlns="http://www.w3.org/199 ...
html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...
前端根据文字生成字母头像
参考博客:https://mkblog.cn/1886/ 代码如下: <html><head><title>前端根据文字生成字母头像</title>&l ...
css案例17——圆角头像
一.案例说明 1.关于圆角头像,一般来说都是有一个圆形盒子,不管里面插入的是什么图,显示出来都是圆形的. 这时候把外面的盒子设置好,给里面的图片设置width:100%:height:100%:重要的 ...
css 文字重叠_html网页文字重叠字体叠加显示css如何解决
DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? CSS+DIV布局ul li列表文字内容,当文字比较多时,上排文字重叠在下排li标签内文字上这是什么原因?如何解决css文字重叠呢? 内容较 ...
使用Css隐藏超出容器宽度的文字，溢出部分用“...”表示
哎,今天才知道用Css就可以弄出字数太长时"截取"字数的效果,以前还傻乎乎的在后台,或是用js截取.- -! 代码 1 <html> 2 <head> 3 ...
html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图思路:div相对定位. 图片默认定位, 文字绝对定位参考代码 html> /*div1下面包含着1个图片和1段文字*/ ...
CSS实用技巧第一讲：文字处理
前言作为程序员的我们,书写代码也需要大量的技巧.一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满.因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新.容易理解.舒服自 ...
div css每行文字显示一半同时文字字体重叠显示不全解决方法
CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. ...
html 在盒子中字体垂直,第五章,css行内盒模型和文字样式
一,盒模型发现默认样式,会破坏布局,比如p标签的默认样式 p标签默认样式从图片中我们可以看到我们并没有加margin值,可是左边依然有空隙出现,这就是p标签的默认样式,那我们怎么去掉一些会破坏我们 ...

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

CSS 实现文字头像（圆角头像文字内容）相关推荐

最新文章

热门文章