RGBA透明度是线性混合而非空间纵深模拟，应改用HSLA调控色相/饱和度模拟空气透视，并辅以backdrop-filter和box-shadow增强层次感。
rgba 透明度不是“离远点就变淡”，而是叠加混合逻辑
直接调低 rgba(0, 0, 0, 0.1) 的 alpha 值，并不会让元素看起来“更远”——它只是让当前色块和它背后的内容做一次固定比例的混合。人眼感知的“远近感”依赖的是对比度衰减、边缘柔化、色彩偏移（比如远景偏蓝灰），纯靠降低透明度反而容易显得像蒙了层半透膜，而不是空间纵深。
- 真实场景中，远处物体对比度下降，但不是简单变“淡”，而是暗部提亮、亮部压暗、饱和度同步降低
-
rgba的 alpha 是线性混合，而人眼对亮度变化是非线性的（韦伯-费希纳定律），所以alpha: 0.3和alpha: 0.6的视觉距离差并不均匀 - 如果父容器有背景色或图片，
rgba的实际呈现会因底层内容不同而漂移——同一组rgba(128, 128, 128, 0.2)在白底上发灰，在黑底上发亮，远近感就乱了
用 hsl/hsla 替代 rgb/rgba 控制“空气透视”效果
想模拟大气中光线散射导致的远近差异，优先调整色相（h）和饱和度（s），再微调明度（l）和透明度（a）。例如远景常用冷灰（hsl(210, 10%, 70%)），近景用暖灰（hsl(30, 15%, 40%)）。
- 避免直接写死
rgb()值，改用hsla()：方便统一调节冷暖与灰度，比如批量把所有“远景”元素的s降到5%、l提到85% - 透明度
a建议控制在0.8–1.0之间，低于0.7容易削弱层次，反而像未渲染完成 - 不要只调一个元素——远近是相对关系，至少保证前景/中景/远景三组颜色在
h和s上有可辨识梯度，比如hsl(20, 20%, 50%)→hsl(180, 12%, 65%)→hsl(220, 5%, 80%)
叠加 backdrop-filter 或 box-shadow 才能强化空间错觉
单靠颜色本身很难骗过眼睛。真正起作用的是边缘处理和背景互动：backdrop-filter: blur(1px) 模拟远景失焦，box-shadow: 0 2px 8px rgba(0,0,0,0.08) 模拟环境光晕，这两者比调 alpha 有效十倍。
-
backdrop-filter兼容性需注意：Safari 支持好，Chrome 需开启硬件加速（加transform: translateZ(0)），Firefox 对blur()支持有限 -
box-shadow的y-offset和模糊半径要匹配 Z 轴位置——越“远”的元素，阴影越浅、越扩散、y 偏移越小（比如0 1px 12px rgba(0,0,0,0.04)） - 慎用
opacity：它会让整个元素（包括子内容、边框、阴影）一起变淡，破坏层级；优先用background-color: hsla(...)或color: hsla(...)局部控制
移动端高DPR屏幕下 rgba 透明度会“过曝”
在 iPhone 或高端安卓机上，CSS 像素和物理像素不是 1:1，rgba(0,0,0,0.1) 渲染时可能被插值放大，导致灰阶断层或意外透出底层纹理，远近过渡变得生硬。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：对高 DPR 设备（
window.devicePixelRatio > 1.5），把 alpha 值提高 10%–20%，比如从0.15改成0.18，用媒体查询或 JS 注入类名控制 - 避免用
rgba做大面积渐变背景——改用linear-gradient(hsla(...), hsla(...))，hsla 梯度更可控 - 检查设计稿标注：如果标注写的是“透明度 12%”，别直接写
rgba(..., 0.12)，先在真机上测——常需手动调到0.14或0.15才匹配视觉预期
