color-mix()不是遮罩函数，仅做静态颜色插值，输出固定RGB值，不读取背景、不响应深色模式；模拟遮罩需用带alpha的目标色+fallback+background-clip:padding-box，且仅适用于纯色背景。
color-mix() 不是遮罩函数，别指望它自动适配背景
color-mix() 只做静态插值：给它两个颜色，它吐出一个确定的 RGB 值，不读取图片、不响应深色模式、不感知父容器。写 color-mix(in srgb, #fff, rgba(0 0 0 / 0.4))，结果永远是某个灰，和底下有没有图毫无关系。它不是 mix-blend-mode，也不是 mask-image，更不是 JS 动态检测——语法对了 ≠ 效果对了。
真正能“模拟遮罩”的写法：带 alpha 的目标色 + fallback + padding-box
想靠 color-mix() 得到类似半透覆盖感，必须满足三个硬条件：
- 混合目标必须是带 alpha 的颜色，如
rgb(0 0 0 / 0.4)或hsl(0 0% 0% / 0.4)；transparent在color-mix()中非法，整条声明静默失效 -
background-color必须前置 fallback，比如background-color: rgba(0, 0, 0, 0.4)；否则 Firefox 118 及更早、旧 Edge 用户看到的是透明或继承父背景 - 必须加
background-clip: padding-box，否则圆角按钮边缘会漏出父容器背景，遮罩“不包边”
正确示例：
button {
--bg: #2563eb;
background-color: rgba(37, 99, 235, 0.9);
background-color: color-mix(in srgb, var(--bg), rgb(0 0 0 / 0.4));
background-clip: padding-box;
border-radius: 6px;
}
浏览器支持有明确断层，CI/CD 容易漏测
截至 2026 年 11 月，color-mix() 仅在以下环境生效：
立即学习“前端免费学习笔记（深入）”；
- Chrome 111+、Edge 111+
- Safari 16.4+（macOS/iOS）
- Firefox 119+（注意：118 及更早版本完全不识别，且无任何警告或降级提示）
这意味着：
- 删掉第一行
background-color: rgba(...)，线上按钮在 Firefox 118 上直接变透明 - 用 Puppeteer 或 Playwright 在旧版 Chromium 上跑 CI 测试，根本测不出 fallback 是否生效
- alpha 值别用
0.45这类小数——某些 Android WebView 对浮点精度处理不一致，改用0.4或0.5
它只适合纯色背景场景，图片上请老实用 linear-gradient
color-mix() 要求输入是确定颜色值，所以它只适合卡片、按钮这类已有 CSS 变量或固定色的元素。遇到 background-image: url(bg.jpg)，这条路就走不通了。真要盖住图片，还是得回到：
.photo {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(bg.jpg);
}
最常被忽略的其实是 alpha 值与文字可读性的平衡：浅色背景配 rgb(0 0 0 / 0.55)，深色背景配 rgb(255 255 255 / 0.4)，而且必须实测——不同屏幕亮度下，同一 alpha 看起来可能差一倍。
