color-mix() 无法生成真正遮罩层，仅支持两色线性插值输出固定RGB值；需用带alpha颜色（如rgb(0 0 0 / 0.4)）作混合目标并提供兼容fallback，且须配合background-clip防止外溢。
color-mix() 不能直接做遮罩层
直接写 color-mix() 生成半透明遮罩层是行不通的。它只做两个颜色值的线性插值，输出一个固定 RGB 值，不读取、不感知背景图或父容器颜色，更不会产生 alpha 合成效果。你写 color-mix(in srgb, #000, rgba(255 255 255 / 0.2))，结果永远是某个确定的浅灰，和底下有没有图片、是不是深色模式完全无关。
想“模拟遮罩”，必须用带 alpha 的颜色参与混合
真正能逼近遮罩视觉的路径只有一条：把一个带透明度的颜色（比如 rgb(0 0 0 / 0.4) 或 hsl(0 0% 0% / 0.4)）作为混合目标，而不是 transparent——后者在 color-mix() 中是非法参数，整条声明会静默失效。
-
color-mix(in srgb, var(--bg), rgb(0 0 0 / 0.4))✅ 可行：黑色半透参与混合，压暗底色但保留纹理感 -
color-mix(in srgb, var(--bg), transparent)❌ 失效：浏览器跳过该声明，悬停后可能变白或继承父背景 -
color-mix(in srgb, var(--bg), #0006)❌ 不支持：十六进制带 alpha 在 color-mix 中不被识别
必须写 fallback，且顺序不能错
Chrome 111+、Safari 16.4+、Firefox 119+ 支持 color-mix()；旧版 Firefox（118 及更早）和多数旧 Edge 完全不识别，会跳过整条 background-color 声明。漏掉降级值，线上按钮悬停就可能变透明或花屏。
正确写法是利用 CSS 层叠机制，把兼容值写在前面：
立即学习“前端免费学习笔记（深入）”；
button:hover {
background-color: rgba(0, 0, 0, 0.4);
background-color: color-mix(in srgb, var(--bg), rgb(0 0 0 / 0.4));
}
别忘了加 background-clip: padding-box，否则圆角按钮的遮罩色会在边缘外溢，露出父容器背景。
它不是替代方案，而是补充手段
color-mix() 适合在已有纯色背景（如卡片、按钮）上做轻量悬停调色，但它无法在图片背景上生成真正的遮罩层。想盖住 url(bg.jpg)，还是得回到 linear-gradient(rgba(), rgba()), url() 这套分层方案。真正难的不是写出那行 color-mix()，而是确保 fallback 值足够接近主色调、alpha 值在不同设备上不发灰、且不破坏文字可读性——这些都得实测，不能只靠语法对了就放心。
