color-mix() 不能控制透明度，仅混合不透明颜色；所谓“半透”是误将 transparent 解析为纯黑后插值得到的灰阶色，实际无 alpha 通道，也不响应背景合成或变量权重。
color-mix() 本身不能调制透明度，它只混合两个不透明颜色；所谓“用它控制透明度”是常见误解，实际是靠混合 transparent 关键字或预设背景色来模拟视觉透感——但必须清楚：这不是 alpha 合成，也不响应真实透明度变化。
为什么 color-mix(in srgb, #000, transparent 70%) 看起来像半透黑？
因为 transparent 在 CSS 中被解析为 rgba(0, 0, 0, 0)，而 color-mix() 遇到它时，会将其当作一个合法的、不透明的黑色（即丢弃 alpha，只取 RGB），再与前一个颜色按权重插值。结果是纯色灰，不是带 alpha 的叠加效果。
常见错误现象：
- 写
color-mix(in srgb, #000, transparent 70%)，在 Chrome 中渲染出#4d4d4d，但 DevTools 拾色器显示 alpha = 1 - 换到深色背景上，该“半透”色不会自动适配，仍显脏灰，不像
rgba(0,0,0,0.3)那样真正与背景合成 - 试图用
var(--alpha)替代70%，整个声明静默失效（color-mix()不接受变量作为权重）
想用变量控制“类透明”效果，只能拆解 RGB 或改用 HSL alpha
如果你的目标是「动态调整遮罩层/按钮悬停色的不透明感」，且要兼容 Firefox 和旧版 Safari，别碰 color-mix() 做透明度——直接走更稳的路径：
立即学习“前端免费学习笔记（深入）”；
- 把基础色拆成 R/G/B 变量：
--bg-r: 36; --bg-g: 36; --bg-b: 36;，再用background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b), var(--alpha)); - 若颜色固定为黑/白/灰，用现代 HSL alpha 写法：
background-color: hsl(0 0% 0% / var(--alpha));（Chrome/Firefox/Safari ≥15.4 全支持） - 不要写
color-mix(in srgb, #000, transparent var(--alpha))——权重位置不解析变量，整条规则被浏览器跳过
color-mix() 真正适合的场景：主题色变体生成
它最靠谱的用途，是基于一个主色 + 白/黑/背景色，批量生成色调（tints）和阴影（shades）——比如 Tailwind 的 bg-red-100 到 bg-red-900 级别：
- 浅色变体：
color-mix(in oklch, var(--primary) 80%, white 20%)（推荐in oklch，亮度过渡自然） - 深色变体：
color-mix(in oklch, var(--primary) 70%, black 30%) - 注意：
var(--primary)必须是无 alpha 的字面量，如#3b82f6或oklch(65% 0.25 270)，不能是rgba(59,130,246,0.8) - 权重加起来必须是
100%，写成80%, 15%会直接失效
最容易被忽略的一点：你写的每一处 color-mix()，都默认输出一个不透明色。它不参与层叠合成逻辑，也不响应父级 opacity。真要叠加透明效果，得靠 background-blend-mode、mix-blend-mode 或多层 rgba() 渐变——color-mix() 只负责“算出下一个纯色”。
