RGBA和HSLA均通过alpha值（0–1）实现颜色半透明，前者基于RGB三通道，后者基于HSL色相模型；二者仅影响当前颜色，不干扰子元素，且渲染效果一致，但需注意IE兼容性及可访问性对比度要求。
RGBA 设置颜色半透明：alpha 值决定透明度
RGBA 是 RGB 加上一个 alpha 通道，用来控制不透明度。前三个参数 red、green、blue 范围是 0–255 或 0%–100%，第四个 alpha 是 0–1 的小数（0 完全透明，1 完全不透明）。
-
rgba(255, 0, 0, 0.5)表示半透明红色，背景会透出 -
rgba(0, 0, 0, 0.1)是极淡的黑，常用于蒙层或阴影弱化 - 不要写成
rgba(255, 0, 0, 50%)—— 浏览器只认 0–1 小数，百分比无效 - 如果 alpha 为 0，元素内容仍可交互（除非同时设了
pointer-events: none）
HSLA 设置颜色半透明：更直观地调节色相与透明度
HSLA 是 HSL（色相、饱和度、亮度）加 alpha。色相 h 是 0–360 度，饱和度 s 和亮度 l 是百分比，alpha 同样是 0–1。
-
hsla(120, 100%, 50%, 0.3)是半透明纯绿色 - 改动
h值能快速切换色调，比调 RGB 更符合直觉，适合主题色系统 - 注意：HSL 中
l: 0%总是黑色，l: 100%总是白色，和 alpha 无关；alpha 控制的是整块颜色的透出程度 - Safari 旧版本对 HSLA 支持略差，但 iOS 12+ 和现代 Chrome/Firefox 都没问题
RGBA vs HSLA：选哪个取决于你的工作流
- 如果你从设计工具（如 Figma）复制颜色值，大概率拿到的是 HEX 或 RGB，直接转
rgba() 最省事
- 如果你在写 CSS 变量做主题切换（比如深色模式下统一调亮
l 值），hsla() 更易维护
- 两者最终渲染效果一致，性能无差别，浏览器解析成本几乎可以忽略
- 不要用
opacity 替代它们：它会让整个元素（含子元素）一起变透明，而 RGBA/HSLA 只影响该颜色本身
容易被忽略的坑：继承、层叠和 fallback
- 半透明色不会“叠加变更深”——两个
rgba(0, 0, 0, 0.1) 层叠，实际是 0.1 + 0.1×(1−0.1) ≈ 0.19，不是 0.2
- 在 IE11 及更早版本中，RGBA/HSLA 完全不支持，需提供 fallback：
color: #000;<br>color: rgba(0, 0, 0, 0.7);
- 使用预处理器（如 Sass）时，
transparentize($color, 0.3) 或 rgba($color, 0.7) 比手写更安全，尤其处理变量颜色时
- 背景半透明文字在低对比度下可读性骤降，WCAG 推荐文本与其背景的对比度至少达 4.5:1，用工具检查一下再上线
rgba() 最省事l 值），hsla() 更易维护opacity 替代它们：它会让整个元素（含子元素）一起变透明，而 RGBA/HSLA 只影响该颜色本身- 半透明色不会“叠加变更深”——两个
rgba(0, 0, 0, 0.1)层叠，实际是 0.1 + 0.1×(1−0.1) ≈ 0.19，不是 0.2 - 在 IE11 及更早版本中，RGBA/HSLA 完全不支持，需提供 fallback：
color: #000;<br>color: rgba(0, 0, 0, 0.7);
- 使用预处理器（如 Sass）时，
transparentize($color, 0.3)或rgba($color, 0.7)比手写更安全，尤其处理变量颜色时 - 背景半透明文字在低对比度下可读性骤降，WCAG 推荐文本与其背景的对比度至少达 4.5:1，用工具检查一下再上线
alpha 值看似简单，但真正控制好视觉层次和可访问性，得结合具体场景反复调——尤其是按钮悬停、卡片投影、模态框遮罩这些地方，0.05 的差异都可能让界面显得“发灰”或“发虚”。
