color-mix() 不支持透明色，因 transparent 是合成关键字而非颜色值，rgba/hsla 等含 alpha 的颜色亦被拒绝；正确做法是用带 alpha 的 rgb()/hsl()（如 rgb(255 255 255 / 0.15)）替代，并前置 rgba() 回退声明。
color-mix() 无法与透明色混合生成不透明度——它根本不接受 transparent、rgba()、hsla() 或任何含 alpha 的颜色作为输入参数。
为什么 color-mix(in srgb, #007bff, transparent) 会失效
浏览器解析时直接跳过整条声明，既不报错也不降级，表现就是悬停后背景“消失”或回退到上一个有效 background-color 值。根本原因是：color-mix() 只处理**不透明的静态颜色字面量**，transparent 不是颜色值，而是合成关键字；rgba(0, 123, 255, 0.3) 含 alpha 通道，被视作无效输入。
- Chrome 报
Invalid property value - Safari 静默忽略整条声明
- Firefox（即使开启实验标志）拒绝解析
真正能用的“半透感”替代写法：用带 alpha 的 rgb()/hsl() 代替 transparent
想让按钮悬停变亮且微透，不是混 transparent，而是混一个极淡的白/黑（带 alpha），再和主色线性插值：
button {
--btn-bg: #007bff;
background-color: var(--btn-bg);
transition: background-color 0.2s;
}
<p>button:hover {
/<em> ✅ 正确：用 rgb(255 255 255 / 0.15) 替代 transparent </em>/
background-color: color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15));
}- 权重默认 50%–50%，若要更柔和可显式写
rgb(255 255 255 / 0.15) 30% - 深色主题下换
rgb(0 0 0 / 0.1)，避免发灰 - 十六进制带 alpha（如
#00000080）同样不被支持，必须用rgb()或hsl()+/ alpha语法
兼容性兜底必须手动声明 rgba() 回退
不支持 color-mix() 的浏览器（如 Firefox 118 及更早、旧版 Safari）会忽略整条 background-color 声明，导致悬停无变化甚至背景变透明。必须前置声明传统值：
立即学习“前端免费学习笔记（深入）”；
button:hover {
/* ⚠️ 必须放在 color-mix 前面，否则 fallback 会被覆盖 */
background-color: rgba(0, 123, 255, 0.9);
background-color: color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15));
}- 顺序不能反：CSS 层叠机制要求 fallback 在前
- 不要用
opacity过渡——它会让整个元素（包括文字、边框）变透明，破坏可读性 - 记得加
background-clip: padding-box，否则圆角按钮悬停时可能漏出父容器背景
最易被忽略的一点：你写的不是“透明度控制”，而是“预烘焙的视觉近似”。一旦页面启用动态主题、用户修改系统色阶、或背景图随 viewport 变化，这种靠 color-mix() 算出来的色值就不再匹配真实叠加效果——它从一开始就没读取过背景。
