如何使用mix-blend-mode实现CSS颜色混合，打造个性视觉叠加效果？

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

它只对非隔离的、处于同一堆叠上下文中的兄弟或后代元素起作用。容器设置了isolation: isolate、transform、filter、opacity等属性。

• 常见失效场景：轮播图容器加了 transform: translateZ(0) 做硬件加速，结果背景图和文字叠不上去
• SVG 内部的 <g> 和 <rect> 可以互相 blend，但 SVG 外套一层 div 并设 mix-blend-mode: multiply，它只和自己的兄弟元素 blend，不和 SVG 内容混合
• 伪元素（如 ::before）可以和宿主元素内容 blend，前提是没触发隔离（比如宿主元素本身没设 opacity）

mix-blend-mode 的值选错会导致完全看不见内容

multiply、screen、overlay 看起来“正常”，但 color-burn、lighten 在浅色背景上可能让文字直接变透明；exclusion 对灰阶敏感，纯黑纯白区域会变灰，不是“叠加”，是“抵消”。