如何运用Mix-blend-mode实现CSS艺术感文字设计？

本文共计890个文字，预计阅读时间需要4分钟。

由于`mix-blend-mode`默认只对非背景层且有绘画内容的元素起作用，纯文字元素（如``标签内的内容）将不会受到其影响。

• 必须让文字本身成为“混合源”：给文字加一层带颜色/渐变的 background-clip: text + -webkit-text-fill-color: transparent，再套上 mix-blend-mode
• 或者更直接：把文字放在一个有背景的容器里，让容器设 mix-blend-mode，文字作为子元素参与混合（但要注意层级和 stacking context）
• 常见错误是直接给 <h1> 写 mix-blend-mode: multiply 却没配背景或遮罩，结果白屏或无变化

哪些 blend mode 对文字效果最可控？

screen 和 multiply 最容易出效果，但行为相反：multiply 让浅色文字在深底上“沉下去”，screen 让深色文字在浅底上“透出来”。真正有艺术感的往往是 overlay 和 color-dodge，但它们对输入对比度极度敏感。