纯CSS实现取字符串的第一个字符实现文字图标功能

时间：2021-05-08

如何通过CSS实现文字图标

.nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px; background-color: #b3b4c5; vertical-align: middle; overflow: hidden; font-size: 16px; text-indent: 8px; text-align: center; letter-spacing: 8px; color: #fff; word-break: break-all;}<div class="nav-icon-normal">技术是基础</div><div class="nav-icon-normal">能力是关键</div><div class="nav-icon-normal">沟通最重要</div><div class="nav-icon-normal">通用接口</div>

效果预览

这样基本效果实现出来，但是还是差一点。怎么通过实现图标背景色跟随文字

可以看这篇Js 根据名字提取颜色值

如何实现看这里，下面代码仅用于该文章的示例，真实使用需要根据实际情况做调整

var titles = ["技术是基础", "能力是关键", "沟通最重要", "通用接口"];var html = "";for (let i = 0; i < titles.length; i++) { const title = titles[i]; const color = extractColorByName(title); html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);}// 输出document.write(html);/** * 根据名字提取颜色 * @param name 名字 */function extractColorByName(name) { var temp = []; temp.push("#"); for (let index = 0; index < name.length; index++) { temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16)); } return temp.slice(0, 5).join('').slice(0, 4);}

实现后的效果如下

最终附上案列代码

<!DOCTYPE html><html lang="en"><head> <style> .nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px; background-color: #b3b4c5; vertical-align: middle; overflow: hidden; font-size: 16px; text-indent: 8px; text-align: center; letter-spacing: 8px; color: #fff; word-break: break-all; } </style></head> <body> <script type="text/javascript"> var titles = ["技术是基础", "能力是关键", "沟通最重要", "通用接口"]; var html = ""; for (let i = 0; i < titles.length; i++) { const title = titles[i]; const color = extractColorByName(title); html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title); } // 输出测试HTML document.write(html); /** * 根据名字提取颜色 * @param name 名字 */ function extractColorByName(name) { var temp = []; temp.push("#"); for (let index = 0; index < name.length; index++) { temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16)); } return temp.slice(0, 5).join('').slice(0, 4); } </script></body> </html>

总结

到此这篇关于纯CSS实现取字符串的第一个字符实现文字图标功能的文章就介绍到这了,更多相关css实现文字图标内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章