rgba()才能控制透明度，rgb()仅支持纯色；rgba()四参数含0–1小数alpha值，作用于颜色本身，兼容性需rgb()回退，适用于动态调参与多层级半透设计。
rgb() 只能定义纯色，rgba() 才能控制透明度——这是最直接的判断。如果你需要半透背景、遮罩层或文字叠加效果，必须用 rgba()；单纯设个不透明色，rgb() 更简洁安全。
rgb() 和 rgba() 的参数结构差异
rgb() 接收三个参数：rgb(255, 0, 0)，分别对应红、绿、蓝，取值范围是 0–255 或 0%–100%。
rgba() 是四个参数：rgba(255, 0, 0, 0.5)，前三个和 rgb() 一样，第四个是 alpha（透明度），**只能是 0–1 的小数**，不是百分比，也不是整数。
- 错误写法：
rgba(255, 0, 0, 50%)、rgba(255, 0, 0, 50)、rgba(255, 0, 0, -0.1) - 正确写法：
rgba(255, 0, 0, 0.5)、rgba(255, 0, 0, .5)（可省略前导零）
透明度作用范围完全不同
rgba() 的 alpha **只作用于颜色本身**：比如 background-color: rgba(0, 0, 0, 0.3)，仅让背景半透，文字、子元素不受影响。
而如果用 rgb() + opacity 实现类似效果，opacity 会把整个元素（包括子节点）一起变透明，容易破坏交互和布局。
-
background-color: rgba(0, 0, 0, 0.3)→ 背景透，文字清晰 -
background-color: rgb(0, 0, 0); opacity: 0.3→ 整个 div 变淡，里面按钮也变灰不可点
兼容性与回退方案怎么写
现代浏览器全支持rgba()，但旧版 IE（IE8 及以下）完全不识别。如果项目还需兼容，得加一层 rgb() 回退：
color: rgb(255, 99, 71); color: rgba(255, 99, 71, 0.7);
CSS 解析器会忽略不支持的声明，所以后写的 rgba() 覆盖前面的 rgb()；但顺序不能反，否则老浏览器会用错值。
注意：alpha 值为 0 时元素“颜色”完全不可见，但依然占据文档流、响应事件——这不是隐藏，只是视觉消失。
什么时候该选 rgba() 而不是 hex 或 hsl
- 需要动态调透明度（比如 JS 修改 alpha 值）→ 必须用rgba()，hex 不支持透明
- 要微调同一色系的多个半透层级（如遮罩从 0.2 到 0.8）→ rgba() 参数直观，改一个数字就行
- 用 CSS 自定义属性控制主题时，rgba(var(--r), var(--g), var(--b), 0.6) 比拼接 hex 灵活得多
rgba() 的 alpha 是独立通道，它和父容器背景混合渲染，最终效果受底层内容影响——这点常被忽略，调试时建议在不同背景色下预览实际表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
