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，背景就变成透明——可能意外暴露底层内容。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 必须写一个不带 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 前缀

半透明背景看着简单，真正卡住人的往往是 fallback 缺失、alpha 值直觉误判，还有和现代滤镜混用时的渲染预期偏差。别默认“写了就能看到效果”，多在 iOS 和旧 Android 上点开调试器看实际渲染结果。