rgba的a参数是alpha通道，表示颜色叠加时的权重比例，取值0～1，仅影响指定颜色属性；其通过加权混合公式R₁×α+R₂×(1−α)计算最终色值，与opacity的元素级透明有本质区别。
rgba 中的 a 参数就是 alpha 通道，控制颜色本身的透明度
它不是“让整个元素变淡”，而是告诉浏览器：“这个颜色值在叠加时，只贡献多少分量”。a 取值范围是 0（完全透明，不参与混合）到 1（完全不透明，100%覆盖背景）。关键在于：它只作用于你写的那个颜色——比如 background-color: rgba(0, 0, 0, 0.6)，只有背景色带透明，文字、子元素、边框全都不受影响。
alpha 值怎么算出最终显示的颜色？
浏览器不是简单地“把颜色变淡”，而是做加权混合。假设前景色是 rgba(R₁, G₁, B₁, α)，背景色是 rgb(R₂, G₂, B₂)，那么最终每个通道的显示值是：
最终红 = R₁ × α + R₂ × (1 − α)
最终绿 = G₁ × α + G₂ × (1 − α)
最终蓝 = B₁ × α + B₂ × (1 − α)
例如：rgba(255, 0, 0, 0.5) 叠在白色背景（rgb(255, 255, 255)）上，红色通道结果是 255×0.5 + 255×0.5 = 255，但绿色通道是 0×0.5 + 255×0.5 ≈ 128，所以人眼看到的是偏粉的 #FF8080，而不是“半透明的纯红”。
和 opacity 的区别到底在哪？
这是最容易混淆也最常踩坑的地方：
立即学习“前端免费学习笔记（深入）”；
-
rgba()是“颜色级透明”：只改某个颜色属性（如background-color或color），子元素完全不受影响 -
opacity是“元素级透明”：整个元素及其所有后代（文字、图片、伪元素、边框）都按相同比例变透明，且会触发重绘层，可能影响性能 -
opacity具有继承性：父元素设了opacity: 0.5，子元素即使写opacity: 1也没用 -
rgba()不支持 IE8 及更早版本；opacity在 IE9+ 才可靠（IE8 需用滤镜 hack）
实际写法和常见陷阱
写 rgba() 时注意这些细节：
- 第四个参数必须是小数（
0.5），不能写成百分比（50%）或整数（5） - 可以省略前导零，
rgba(0, 0, 0, .7)合法，但rgba(0, 0, 0, .)无效 - 别误用在不支持的属性上：IE8 不支持
border-color: rgba(...)，会直接失效（退成无边框） - 渐变中混用
rgba()很安全：background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0))—— 每个色标独立控透明
真正要小心的，不是 a 值本身，而是你以为它“只是调淡颜色”，却忽略了它背后是像素级混合计算——同一行文字叠在不同背景上，哪怕 a 值相同，视觉效果也可能完全不同。
