color-mix()不能混合带alpha的颜色值，仅支持纯色如#ff0000或rgb(255 0 0)，不接受rgba()或rgb()含透明度写法；其本质是线性srgb插值，与premultiplied alpha叠加原理不同，结果存在偏差。
color-mix() 不能混合带 alpha 的颜色值
color-mix() 只接受不带透明度的颜色作为输入项，比如 #ff0000、rgb(255 0 0)、hsl(0 100% 50%)，但不能写 rgba(255, 0, 0, 0.5) 或 rgb(255 0 0 / 0.5)——浏览器会直接忽略该函数或报解析错误。它处理的是“纯色之间的插值”，不是 alpha 合成。想模拟半透叠色效果，得先手动把 rgba 颜色“拍平”成最终合成色（例如用 DevTools 拾取器读出叠加后的真实 RGB），再拿这两个拍平后的颜色喂给 color-mix()。
color-mix(in srgb) 和实际 rgba 叠加结果不一致
即使你把两层 rgba 叠加后的最终色提取出来，再用 color-mix(in srgb, #f00 70%, #00f 30%) 去模拟，结果仍可能偏差明显。原因在于：color-mix() 是线性 sRGB 插值，而浏览器渲染 rgba 叠加时走的是 Premultiplied Alpha 路径，底层公式不同。尤其当权重不对称（如 90%/10%）或涉及深色时，color-mix() 容易偏灰、失饱和。实测中，color-mix(in lch, ...) 在明暗过渡上更自然，但目前仅 Firefox 111+ 和 Chrome 119+ 支持，且不能 fallback。
替代方案：用 background-blend-mode 更贴近设计意图
如果你真正想要的是“图片上盖一层半透色，再和背景融合出柔光/压暗效果”，别硬套 color-mix()。直接用 background-blend-mode 更可靠：
- 确保背景声明里至少有两个图层，例如
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(img.jpg) - 优先用十六进制透明色
#00000080替代rgba(0,0,0,0.5)，避开旧 Safari 解析 bug - 模式选
soft-light或overlay，比multiply对深色背景更友好，文字可读性不易崩
注意：它不适用于 <img> 标签本身——必须是元素的 background-image 才生效。
SCSS 中 mix() 函数和 color-mix() 不是同一回事
很多人在 Sass 里写 mix($a, $b, 60%)，以为等价于 CSS 的 color-mix(in srgb, $a 60%, $b 40%)，其实不是。SCSS 的 mix() 默认在 HSB 空间运算（Dart Sass 1.50+ 可切 sRGB），且权重含义不同：mix($a, $b, 60%) 表示 $a 占 60%，$b 固定 100% 不透明；而 color-mix() 要求权重总和为 100%，且支持 in lch 这类感知均匀空间。更关键的是：SCSS 编译期无法运行 color-mix()，它只能出现在最终输出的 CSS 文件里，不能用于变量计算。
真正难的不是写对语法，而是搞清你到底要“模拟叠加结果”还是“控制混合过程”——前者得算 alpha 公式，后者才轮到 color-mix() 上场。大多数 UI 场景里，后者反而不是刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
