rgba()比opacity更安全，因只让背景透明而文字保持100%不透明；其alpha值须为0–1小数，非百分比或整数；深浅色模式下需配合CSS变量或@media适配；IE8不支持但IE9+支持，可降级为纯色；叠加时透明度按混合规则计算而非相加。
rgba() 背景色为什么比 opacity 更安全
直接给元素设 opacity 会让整个元素（包括文字、子元素）一起变透明，经常导致文字看不清。而 rgba() 只作用于背景色本身，文字和内容保持 100% 不透明，这才是真正可控的“背景透明”。
rgba() 的四个参数必须按顺序写对
rgba() 接收红、绿、蓝、透明度四个值，前三个是 0–255 的整数，最后一个是 0–1 的小数。常见错误是把 alpha 写成百分比（比如 rgba(0,0,0,50%)），这会直接失效；也有人把 alpha 写成整数（如 0.5 写成 5），浏览器会当无效值忽略。
-
rgba(255, 255, 255, 0.8)→ 白色背景，20% 透明（即 80% 不透明） -
rgba(0, 0, 0, 0.1)→ 黑色背景，90% 透明，适合蒙层叠加 - alpha =
0表示完全透明，1表示完全不透明
透明背景在深色/浅色模式下容易翻车
用 rgba() 设置半透背景时，如果父容器背景色动态切换（比如系统深色模式），文字可读性可能突然崩坏。例如 rgba(255,255,255,0.1) 在白色底上几乎看不见，在黑色底上又太刺眼。
- 避免固定写死 alpha 值，优先考虑用 CSS 自定义属性配合
@media (prefers-color-scheme: dark)分别定义 - 更稳妥的做法：用
backdrop-filter: blur(4px)配合低 alpha 的rgba()，模拟毛玻璃效果，视觉容错率更高 - 测试时务必在真实深/浅背景下打开 DevTools，手动切换
color-scheme查看对比
IE 不支持 rgba()？其实有替代方案但别硬扛
IE8 及更早版本确实不识别 rgba()，但 IE9+ 已支持。现在还为 IE8 写 filter: progid:DXImageTransform.Microsoft.gradient 不仅代码臃肿，还会干扰现代浏览器渲染。除非项目明确要求兼容 IE8，否则直接放弃。
立即学习“前端免费学习笔记（深入）”；
- 若真需兼容，用
background-color: #000;作降级，再加一行background-color: rgba(0,0,0,0.5);—— 后者会覆盖前者，现代浏览器生效，IE8 忽略并回退到纯黑 - 注意：CSS 预处理器（如 Sass）的
transparentize($color, $amount)函数生成的仍是rgba()，不会自动加 IE 滤镜
rgba() 背景叠在一起，透明度不是简单相加，而是按颜色混合规则计算，调试时得靠眼睛看，不能靠算。 
