rgba()的alpha值为0–1小数而非百分比，如rgba(0,0,0,0.5)有效，rgba(0,0,0,50)无效；它仅作用于颜色本身，不影响子元素，与影响整个元素及其后代的opacity有本质区别。
background-color 用 rgba() 设置透明背景时，alpha 值不是百分比
rgba() 的第四个参数 alpha 是 0–1 之间的数值，不是 0–100 的百分比。写成 rgba(0, 0, 0, 50) 是无效的，浏览器会直接忽略整个声明。
常见错误现象：background-color: rgba(255, 255, 255, 0.8) 显示正常，但换成 rgba(255, 255, 255, 80%) 或 rgba(255, 255, 255, 80) 就失效——后者甚至可能让整个样式规则被丢弃。
-
0表示完全透明（背景色不可见） -
0.01是极淡的半透，0.99几乎不透明 - 如果需要精确控制，建议用小数点后两位，比如
0.75、0.23
rgba() 和 opacity 的区别：别混用，影响范围完全不同
rgba() 只作用于颜色本身，不影响子元素；而 opacity 会让整个元素及其所有后代一起变透明——这是最容易踩的坑。
例如给一个带文字的 div 设置 opacity: 0.5，文字也会变淡；但用 background-color: rgba(0, 0, 0, 0.5)，只有背景半透，文字保持 100% 不透明。
立即学习“前端免费学习笔记（深入）”；
- 要只调背景透明度 → 用
rgba()或hsla() - 要整体“雾化”效果（含边框、文字、子元素）→ 才考虑
opacity -
opacity还会触发新层叠上下文，可能意外改变 z-index 行为
兼容性注意：IE8 及更早版本不支持 rgba()
如果你的项目还需支持 IE8，rgba() 会直接被忽略，导致背景色变成默认透明（即显示父容器背景）。这不是 bug，是标准行为。
解决方案不是加 hack，而是用渐变滤镜或 fallback 颜色：
div {
background-color: #000; /* fallback for IE8 */
background-color: rgba(0, 0, 0, 0.6);
}现代项目基本可忽略 IE8，但若用在内网系统或政企老平台，得确认目标环境。
替代方案：hsla() 更适合按视觉直觉调整透明度
如果你习惯用色相/饱和度/亮度调色（比如设计稿给的是 HSL 值），hsla() 比 rgba() 更自然——它和 rgba() 语法一致，只是前三个参数换成了 h、s、l，第四个仍是 alpha。
例如：hsla(200, 100%, 50%, 0.7) 比 rgba(0, 102, 204, 0.7) 更容易知道这是个偏蓝的半透色。
- 修改色相（
h）不会影响透明度，避免误调r/g/b带来的灰阶偏移 - 设计师给的 Figma/Sketch 色值常带 alpha，导出时往往优先生成
hsla()或rgba()，二者可互换 - 所有支持
rgba()的浏览器也都支持hsla()
真正麻烦的不是怎么写 rgba()，而是当背景图、边框、阴影和文字叠在一起时，alpha 值微调 0.05 就可能让可读性断崖下跌。这时候得打开开发者工具，实时拖动 alpha 滑块看效果，而不是靠记忆换算。
