纯CSS如何实现取字符串的第一个字符实现文字图标功能
短信预约 -IT技能 免费直播动态提醒
这篇文章将为大家详细讲解有关纯CSS如何实现取字符串的第一个字符实现文字图标功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
如何通过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);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); 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如何实现取字符串的第一个字符实现文字图标功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
