safari 不支持 #rrggbbaa 语法，必须拆分 rgb 和 alpha 并用 rgba() 组合；alpha 只接受 0–1 小数（如 0.6），百分比（60%）仅在新式 rgb() 空格语法中有效但 firefox 不支持；遮罩层应避免 opacity，改用 rgba() 控制背景透明度以保子元素可交互。
为什么不能直接用 #rrggbbaa 赋值给 CSS 变量控制透明度
因为 Safari（截至 iOS 17 / macOS 14）根本不识别 #ff000080 这类带 alpha 的十六进制写法，解析失败后会 fallback 成黑色或完全失效。CSS 变量虽能存下这个字符串，但后续用在 background-color 或 color 里时，浏览器不认——这不是变量问题，是渲染引擎兼容性断层。
真正能跨浏览器稳定生效的路径只有一条：把颜色拆成 RGB 分量 + 独立的 alpha 值，再用 rgba() 组合。
rgba() 中 alpha 参数必须是 0–1 小数，不是百分比
写 rgba(0, 0, 0, 60%) 看似合理，但实际无效：浏览器会忽略整个声明，降级为不透明黑色。alpha 只接受小数（0.6）或整数（0、1），百分比仅在新式空格语法中合法（如 rgb(0 0 0 / 60%)），但该语法在 Firefox 中尚未支持。
-
--mask-alpha: 0.6✅ 安全通用 -
--mask-alpha: 60%❌ 多数场景失效 -
--mask-alpha: 60❌ 浏览器直接跳过
如何从 HEX 颜色安全提取 RGB 并存入变量
别试图用 JS 或 CSS runtime 解析 #242424 —— 没标准 API 支持。正确做法是在构建阶段或手动转换，然后定义分量变量：
:root {<br> --dark-r: 36;<br> --dark-g: 36;<br> --dark-b: 36;<br> --dark-alpha: 0.7;<br>}
使用时直接组合：background-color: rgba(var(--dark-r), var(--dark-g), var(--dark-b), var(--dark-alpha));
这样既兼容 Safari，又避免硬编码，改主题只需动一个 --dark-alpha。
遮罩层透明度必须用 background-color: rgba()，不能用 opacity
给遮罩容器设 opacity: 0.5 是典型错误：它会让里面所有按钮、文字一起变灰，可读性崩坏，还可能造成点击穿透（Safari 和旧版 Chrome 对半透明元素事件捕获更弱）。
- ✅ 正确：用
rgba()控制背景色本身透明度，子元素保持 100% 清晰和可交互 - ✅ 必须配合
position: fixed和足够高的z-index，否则叠不上去 - ⚠️ 注意：alpha 值一旦在某处用了小数（
0.4），就别在另一处混用百分比（40%），覆盖逻辑会错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
