color-mix() 仅执行线性插值而非真实颜色叠加，它不读取背景、忽略透明度，仅按数学公式输出固定颜色；真叠加需用 background-blend-mode 或手动拍平图层。
color-mix() 不能实现真正的“颜色叠加”，它只是两个纯色之间的线性插值，和 rgba() 叠加、background-blend-mode 或图层混合完全不是一回事。别被名字误导——它不读取背景色，也不考虑透明度合成逻辑。
为什么 color-mix() 不是叠加，而是插值
浏览器对 color-mix(in srgb, #f00 60%, #00f 40%) 的处理，等价于直接算：rgb(255*0.6 + 0*0.4, 0*0.6 + 0*0.4, 0*0.6 + 255*0.4) → rgb(153, 0, 102)。它不关心元素下面有没有背景、背景是什么颜色、有没有 opacity，只按数学公式输出一个新颜色值。
- 你写
color: color-mix(in srgb, red, white)，结果永远是固定的粉灰，不会随父容器背景变化 - 想模拟“红色文字盖在蓝色背景上”的视觉效果？
color-mix()给不出这个效果，它甚至不知道蓝色背景存在 - 真正做叠加（比如半透色层叠）必须用
background-blend-mode或预先把两层拍平成最终色再喂给color-mix()
color-mix() 能用的唯一“叠加”场景：拍平后静态混色
如果你已知底层背景色（比如固定是 #1e1e1e），且上层是固定透明度的强调色（如 rgba(59, 130, 246, 0.2)），可以手动把这两层“拍平”成一个最终 RGB 值，再用 color-mix() 混合其他颜色——但这是离线计算，不是实时叠加。
- 用 DevTools 的拾色器点出叠加后的实际像素色（例如
#3a5c8c） - 把这个色值和另一个基础色（如
#007bff）一起喂给color-mix(in srgb, #3a5c8c 70%, #007bff 30%) - 注意：权重总和不必为 100%，浏览器会自动归一化；但每个颜色后必须带百分比或数字，
red 60%合法，red 60静默失败
替代方案：用 background-blend-mode 实现真叠加
如果目标是“让一层半透色和背景融合”，别硬套 color-mix()。直接用 background-blend-mode 更可靠，且无需 JS：
- 确保背景至少有两个图层：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(img.jpg) - 模式选
soft-light或overlay，比multiply对深色背景更友好 - 十六进制透明色优先写
#00000080，避开旧 Safari 对rgba()的解析 bug - 注意：
background-blend-mode只对background-image生效，不适用于<img>标签本身
兼容性和 fallback 必须手动写死
截至 2026 年 6 月，color-mix() 在 Firefox 119+ 默认仍需开启 layout.css.color-mix.enabled，Safari 16.4+ 支持但不支持 in oklch，Chrome/Edge 相对最稳。它永远不会“自动降级”。
- fallback 必须显式写在前一行：
color: #007bff; color: color-mix(in srgb, #007bff, #fff 20%) - @supports 检测要带完整调用：
@supports (color: color-mix(in srgb, red, blue))，漏掉in srgb就检测失败 - 所有色彩空间名严格小写：
in srgb合法，in SRGB或in rgb都无效 - 它不接受任何带 alpha 的输入色：
rgba(255,0,0,0.5)、rgb(255 0 0 / 0.5)全部被忽略
真正难的不是写对语法，而是意识到 color-mix() 从设计上就拒绝“响应式叠加”——它只做确定性计算。想让它看起来像叠加，得先放弃“实时”这个念头，转而控制输入色的确定性、拍平过程的准确性，以及 fallback 的兜底强度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
