rgba()比opacity更适合做半透明背景，因它仅作用于背景色而不影响文字和子元素；opacity则会使整个元素及其内容一同变透明。
rgba() 为什么比 opacity 更适合做半透明背景
opacity 会让整个元素（包括文字、子元素）一起变透明，而 rgba() 只作用于背景色本身。如果你只想让背景“透一点”，但文字保持清晰，rgba() 是唯一靠谱的选择。
- 常见错误现象：
opacity: 0.5导致按钮文字也发虚，点击区域变难识别 - 使用场景：模态框遮罩层、卡片背景、悬停高亮、数据可视化图层叠加
- 参数差异：
rgba(r, g, b, a)的a是 0–1 的小数（不是百分比），0.7表示 70% 不透明度，不是 70% 透明度
写法细节：别漏掉 fallback 和单位
CSS 不会报错，但老浏览器（IE8 及更早）完全不支持 rgba()，直接忽略该声明。如果没设 fallback，背景就变成透明——可能意外暴露底层内容。
- 必须写一个不带 alpha 的
background-color在前：background-color: #000; background-color: rgba(0, 0, 0, 0.6); - 十六进制颜色不能带 alpha（如
#00000080）——那是 CSS Color Module Level 4 新语法，目前 Safari/Chrome 支持有限，别在生产环境依赖 -
rgb()和rgba()的数值必须是整数，rgba(0, 0, 0, .6)合法，rgba(0, 0, 0, 60%)在部分旧版浏览器中不兼容
和 backdrop-filter 搭配时的坑
想实现毛玻璃效果？backdrop-filter: blur(4px) 需要背景本身有一定不透明度才能看出层次。纯 rgba(0,0,0,0.1) 常常糊成一片，看不出模糊。
- 典型问题：加了
backdrop-filter却像没加一样——先检查rgba()的a值是否太小（建议 ≥0.3） - 性能影响：同时用
rgba()+backdrop-filter在移动端容易掉帧，尤其滚动时；iOS Safari 对rgba()背景的合成优化较差 - 兼容性补救：Safari 15.4+ 才稳定支持
backdrop-filter，且需配合-webkit-backdrop-filter前缀
