CSS 彩色文字

功能

• 彩虹渐变裁进文字形状（`background-clip: text`），产物只有一段 CSS
• 色带数量 2–12 可调，停靠点写出百分比，位置是确定的
• 方向可选左到右、上到下、斜向 135°、右到左
• 饱和度与亮度可调，浅底与深底都能找到合适的档
• 同时给出 `-webkit-` 前缀的声明，Safari 与旧版 Chrome 上也显示
• 预览区实时显示，满意后再复制
• 产物带 `.rainbow-text` 选择器，粘进样式表即可用
• 全部在浏览器本地计算，输入的文字不上传

使用方法

1. 在上面的输入框里打几个字
2. 选渐变方向与色带数量
3. 调饱和度与亮度，直到深浅合适
4. 复制 CSS，贴到你的标题上

常见问题

为什么我看到的是「一块矩形色块压着字」，或者「字干脆看不见了」？

这两种都是缺声明造成的，而且原因正好相反。看到矩形色块说明背景没有被裁成文字形状 —— 少了 `background-clip` 那一条（记得带上 `-webkit-` 前缀那份，Safari 与旧版 Chrome 只认它）。字完全看不见说明字色没让位 —— 少了 `color: transparent`，于是不透明的字色盖在渐变上，看起来就是一片空白。上面给出的完整规则里这几条都在。

为什么不给每个字单独上色？

逐字着色必须往文字里插 `<span>` 包裹每一个字，也就是修改 HTML 结构。而这类工具的产物是一段 CSS：预览区的文字由页面用 `textContent` 写入，模块拿不到也不该拿到 DOM。`background-clip: text` 是这个需求的标准答案，而且产物更耐用 —— 一段 CSS 加一个类名粘到任何标题上都行，插 span 的做法一改文案（或者内容来自后台）就得重做一遍。

我把文字包在 span 里，颜色就没了？

对，文字必须直接留在带这个类的元素里。`background-clip: text` 裁剪的是这个元素自己的背景，子元素里的文字不在裁剪范围内，于是那部分文字照常显示自己的字色（`color: transparent` 也传不下去，因为它是承袭的但被裁掉的是父元素的背景）。所以 `<h1 class="rainbow-text">标题</h1>` 是对的，里面再套一层 `<span>` 就不对了。