这篇文章介绍一下我的“掘金身份证生成”项目的部分技术细节：如何实现字符串不规则变色。
主要使用到的技术是 CSS 的 clip-path
在线体验
此项目正在参加码上掘金编程挑战赛～
项目地址：code.juejin.cn/pen/7158468…
需求背景
当黑色字体遇到蓝色做背景时对比度会大大降低，我们可以通过在蓝色背景中使用对比度较高的白色提升视觉效果以及设计感（如上图）。
需求分析
在满足视觉效果的同时，我们还需要满足以下需求：
- 字符串可以自定义
- 字符串可以选中（如下图）
实现思路
从图中我们可以发现字符串共有两种颜色，所以我们首先做两个相同的卡片，其中一个使用黑色字体另一个使用白色字体，通过CSS的clip-path对白色字体的卡片进行剪裁（path就是背景的路径），所以我们就得到了以下两张卡片
当我们将第二张卡片直接覆盖在第一张卡片时，我们会发现选中字符串时无法选中白色部分
我们可以通过创建第三个一摸一样的卡片，并且将背景色、字体颜色都设置为透明，并且覆盖在前两张卡片的最顶层，这时我们就实现了不规则变色且可以选中文字的需求
当我们需要改变字符串时我们只需要保证三张卡片的字符串完全一致即可
