rgba()中alpha值必须为0–1小数，非百分比或整数；用它调背景透明度不影响子元素，而opacity会；八位十六进制#RRGGBBAA等价于rgba()但兼容性差；alpha=0仍占渲染空间，不等于隐藏。
rgba() 函数里 alpha 值不是百分比，是 0–1 的小数
很多人写 rgba(255, 0, 0, 50%) 或 rgba(255, 0, 0, 50)，结果透明度没生效——浏览器直接忽略整个声明。CSS 规范明确要求 alpha 必须是 0 到 1 之间的小数（含 0 和 1），0 完全透明，1 完全不透明。
常见错误现象：background-color: rgba(0, 0, 0, 0.8) 生效，但换成 0.80 或 .8 也行；换成 80% 就彻底失效，DevTools 里会标红并划掉该行。
-
rgba(255, 0, 0, 0.4)✅ 正确：半透红 -
rgba(255, 0, 0, 40%)❌ 无效：语法错误，被丢弃 -
rgba(255, 0, 0, 0)✅ 有效：完全透明（但保留占位）
RGBA 背景叠加文字时，别用它替代 opacity
用 rgba() 给背景色加透明度，和给整个元素设 opacity 看似效果相似，但行为完全不同。前者只影响颜色通道，后者会让子元素（比如文字、图标）也一起变透明。
使用场景：弹窗蒙层常用 background-color: rgba(0, 0, 0, 0.5)，这样蒙层半透，但上面的按钮和文字保持 100% 清晰；若误用 opacity: 0.5，按钮文字也会发虚，可读性骤降。
立即学习“前端免费学习笔记（深入）”；
- 要透明的是“颜色本身” → 用
rgba() - 要透明的是“整个元素及其所有后代” → 用
opacity -
rgba()不会触发新层叠上下文（除非配合其他属性），opacity会，可能意外影响 z-index 行为
十六进制颜色不能直接加 alpha，得转成 rgba() 或 #RRGGBBAA
CSS 新增了八位十六进制写法 #RRGGBBAA，比如 #ff000080 等价于 rgba(255, 0, 0, 0.5)。但老写法 #ff0000 后面加个 80（如 #ff000080）在旧浏览器里不支持，IE 完全不认，iOS Safari 9 以下也不支持。
参数差异明显：#RRGGBBAA 是简写，rgba() 是函数，两者语义一致但兼容性不同。
- 需要兼容 IE11 或老安卓 WebView → 只能用
rgba() - 项目已放弃 IE，且用构建工具自动补前缀 →
#RRGGBBAA更简洁，尤其配色变量多时 -
#f008（四位简写）是无效的，CSS 不支持四字符带 alpha 的缩写
alpha = 0 时，颜色渲染行为取决于浏览器和上下文
写 color: rgba(0, 0, 0, 0) 并不等于“看不见”，它仍是有效颜色值，在某些场景下会触发意外交互或布局变化。比如 border-color: rgba(0,0,0,0) 在部分浏览器中仍占 border width 的空间，而 border: none 才真正移除。
性能影响不大，但逻辑容易混淆：alpha 为 0 的颜色不是“无”，而是“有颜色、完全不可见”。这会影响无障碍读取（screen reader 可能仍读出该元素）、伪类状态（:hover 仍可触发），甚至 CSS 动画插值（从 rgba(0,0,0,0) 到 rgba(0,0,0,1) 是平滑过渡，但起点不可见）。
- 想隐藏文本内容 → 用
visibility: hidden或font-size: 0，别依赖rgba(..., 0) - 想让边框“视觉消失但保留占位” →
border-color: rgba(0,0,0,0)可行；想彻底移除 →border: none - 动画中用 alpha 0 作起始点没问题，但注意它不是“空值”，不会跳过渲染管线
