color-mix(in oklch, ...) 是实现自适应遮罩的唯一正确方式，OKLCH 的 alpha 语法仅控制自身不透明度，无法实现背景穿透与明暗响应；必须用 color-mix 锚定亮度混合，并严格保障单位、语法和 fallback 链路一致性。
color-mix() 不是透明度替代方案，OKLCH 本身也不处理 alpha。所谓“用 OKLCH 做遮罩”，本质是用 color-mix(in oklch, ...) 在感知均匀空间里混合前景色与背景色，再配合 opacity 或 rgb(0 0 0 / a) 控制透出程度——但这两步不能混为一谈。
为什么不能直接用 oklch(L C H / a) 当遮罩
OKLCH 的 alpha 语法（如 oklch(0.3 0.12 240 / 0.6)）只控制该颜色自身的不透明度，和“遮罩”所需的**背景穿透+局部提亮/压暗**效果无关。你设 background-color: oklch(0.2 0.05 240 / 0.3)，得到的是半透灰蓝块，不是“让底图变暗又保细节”的遮罩层。
- 浏览器对
/ a的支持已稳定（Chrome 111+/Safari 16.4+/Firefox 117+），但语义仍是“自身透明”，非“混合模式” - 若底图是图片或渐变，
oklch(... / a)只叠加一层半透色，无法响应背景明暗变化 - 在深色模式下，
oklch(0.2 0.05 240 / 0.3)会显得更脏，因为 L=0.2 在暗背景下对比度过低
color-mix(in oklch, ...) 才是真正可控的遮罩生成器
要实现“自然遮罩”，关键是让遮罩色随背景亮度自适应：背景越暗，遮罩越浅；背景越亮，遮罩越深。这必须靠 color-mix() 在 OKLCH 空间做亮度锚定混合，而不是硬写一个固定 oklch() 值。
- 正确写法：
background-color: color-mix(in oklch, black 70%, var(--bg) 30%)—— 这里--bg是当前背景的 OKLCH 值，混合后 L 值落在黑（L=0）与背景 L 之间，视觉上就是“压暗但不糊” - 必须用
in oklch：在 sRGB 或 lch 中混合，中间色会发灰；OKLCH 的 L 轴解耦，能保持色相稳定、亮度线性过渡 - 权重建议 60–80% black：低于 50% 遮罩感弱；高于 85% 容易吞没细节，尤其在 OLED 屏上
- 输入色不能带 alpha：
color-mix()会静默丢弃 rgba() 的 alpha，只取 RGB 部分，导致结果偏亮
@supports 和 fallback 必须前置且严格配对
color-mix() 不支持时不会报错，而是整条声明被跳过——如果你把 fallback 写在 @supports 块里，用户看到的就是无遮罩的原始背景，UI 层级全乱。
- 降级色必须写在
@supports外部上方：background-color: #00000033;→ 再跟@supports (color: color-mix(in oklch, black, white)) { ... } - 检测值必须完整：
@supports (color: color-mix(in oklch, black, white))✅，@supports (color: color-mix(in lch, black, white))❌（Safari 17.4+ 仍返回 false） - 绝对不要用
@supports not：安卓 WebView 解析失败会导致整段 CSS 规则消失 - fallback 颜色推荐用
rgb(0 0 0 / 0.2)新语法（兼容 Chrome 105+/Safari 16.4+），比rgba()更可靠
深色模式与禁用态的遮罩需分离 L/C 控制
同一套 color-mix() 遮罩逻辑，在深色模式下会失效：因为 black 70% 在暗背景下几乎无变化。这时候不能只调 alpha，而要换锚点色 + 调 L。
- 深色模式遮罩：改用
color-mix(in oklch, white 60%, var(--bg) 40%)，并确保--bg的 L ≤ 30%，否则提亮过度 - 禁用态遮罩：固定 H、微调 L（±0.02）、大幅降 C（如 0.28 → 0.08），避免“灰蒙蒙盖一层”的廉价感
- 灰色系遮罩必须用
oklch(L 0 H)构建，比如oklch(20% 0 240)，而非gray(20%)或hsl(0, 0%, 20%)—— 后者在 Safari 中渲染不稳定 - 所有混合色阶必须实测：OLED 屏上 L=15% 的遮罩在浅灰背景（L=85%）下可能对比度不足，需手动调到 L=22%
OKLCH 遮罩真正的难点不在函数调用，而在整个链路的单位一致性：L 必须带 %，C 必须是小数，H 不能加 deg，color-mix() 输入不能含 alpha，@supports 检测值必须带完整色彩空间声明——错一个字符，整层遮罩就消失，连 DevTools 都不报 warning。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
