这篇文章将为大家详细讲解有关纯CSS如何实现取字符串的第一个字符实现文字图标功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 如何通过CSS实现文字图标.nav-icon-nORMal&nbs
这篇文章将为大家详细讲解有关纯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如何实现取字符串的第一个字符实现文字图标功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: 纯CSS如何实现取字符串的第一个字符实现文字图标功能
本文链接: https://lsjlt.com/news/251616.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0