如何实现为字母或数字不同区域设置多种不同颜色的效果

方案1：CSS background-clip 实现（最简单，适合静态效果） #

这是成本最低的实现方式，只需要几行CSS就能完成：

• 给文本元素设置透明文字颜色：color: transparent
• 配置符合你需求的多色背景，支持线性渐变、径向渐变、甚至图片背景，比如上下对半分色可以写background: linear-gradient(to bottom, #ff4757 50%, #2ed573 50%);
• 添加核心属性实现背景裁剪到文字区域：-webkit-background-clip: text; background-clip: text;，加webkit前缀是为了兼容部分旧版本浏览器
• 自行调整字体大小、字重属性达到最优显示效果

示例代码：

.split-color-number {
  font-size: 120px;
  font-weight: 900;
  color: transparent;
  /* 以下为45度角斜向分色的渐变配置 */
  background: linear-gradient(135deg, #fc5c7d 0%, #fc5c7d 45%, #6a82fb 45%, #6a82fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

方案2：SVG 实现（更灵活，支持复杂动效、不规则分色） #

如果需要做不规则区域分色、或者需要搭配滚动、hover等交互触发颜色变化，用SVG实现适配性更好：

• 创建SVG文本节点写入需要显示的数字
• 在defs标签内定义渐变、图案等填充规则，直接指定给文本的fill属性即可
• 更复杂的分区需求可以配合clipPath、mask做多层文本裁切，分别填充不同颜色

示例代码：

<svg width="200" height="150" viewBox="0 0 200 150">
  <defs>
    <!-- 定义上下对半分色的渐变 -->
    <linearGradient id="splitGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="50%" stop-color="#ff6b6b" />
      <stop offset="50%" stop-color="#4ecdc4" />
    </linearGradient>
  </defs>
  <text x="100" y="110" font-size="120" font-weight="900" text-anchor="middle" fill="url(#splitGradient)">8</text>
</svg>

如果需要实现交互触发的动态分色效果，只需要配合JS监听对应交互事件，动态修改渐变的stop位置、背景偏移量等参数即可。

内容的提问来源于stack exchange，提问作者prawn