rgba()的alpha参数必须是0–1的小数，0.0全透、0.5半透、1.0不透；错误使用百分比或整数会导致声明被忽略；其透明度仅作用于指定颜色属性，不影响文字和子元素，与opacity有本质区别。
rgba() 的 alpha 参数必须是 0–1 的小数，不是百分比或整数
很多人写 background-color: rgba(0, 0, 0, 50%) 或 background-color: rgba(0, 0, 0, 50)，结果背景完全不透明——浏览器直接忽略整条声明，回退到默认（比如黑色 rgb(0,0,0)）。rgba() 第四个参数只接受 0 到 1 之间的小数：0.0 是全透，0.5 是半透，1.0 是不透。
-
rgba(255, 255, 255, 0.9)：适合卡片浮层，背景微透、文字清晰 -
rgba(0, 0, 0, 0.1)：极淡遮罩，常用于 hover 模糊提示或 subtle overlay -
rgba(44, 62, 80, 0.85)：比十六进制更可控，尤其适合设计系统中统一灰阶+透明度
background-color: rgba() 只影响背景，不影响文字和子元素
这是和 opacity 最本质的区别。用 background-color: rgba(0, 0, 0, 0.5)，文字、图标、边框都保持 100% 不透明；而 opacity: 0.5 会让整个元素及其所有后代一起变淡，导致可读性下降、z-index 失效、动画卡顿。
- 做登录弹窗蒙层时，用
background-color: rgba(0, 0, 0, 0.7)能压住底图又不模糊按钮文字 - 如果误用
opacity，按钮文字会发虚，且点击区域可能因层叠上下文异常而失焦 - 想让文字也带透明度？那是另一层需求，得单独对
color或border-color用rgba()
需要兼容 IE8 或旧 Safari？必须手动加 fallback 色值
#RRGGBBAA（如 #00000080）写法简洁，但 IE 完全不识别，Safari 12 之前也不支持。它不会自动降级，必须靠 CSS 层叠顺序手动 fallback。
- 正确顺序：
background-color: #2c3e50; background-color: rgba(44, 62, 80, 0.85); - 错误写法：
background-color: rgba(44, 62, 80, 0.85); background-color: #2c3e50;—— IE8 直接无背景 - 验证是否生效：在控制台执行
getComputedStyle(el).backgroundColor，返回rgb(44, 62, 80)就说明rgba()被跳过了
背景图 + 透明色叠加时，rgba 是最轻量的实现方式
给带背景图的容器加一层“灰蒙”，不用 JS、不用额外 DOM，一行 background 声明就能搞定：
background: rgba(0, 0, 0, 0.4) url('hero.jpg') center/cover no-repeat;
注意：rgba() 在这里作为颜色层盖在图片上，不是调整图片本身透明度（CSS 没有直接调背景图 opacity 的属性）。
- 这种写法比伪元素更轻量，避免多一层 DOM 和定位开销
- alpha 值太低（如
0.05）在浅色背景上几乎看不出效果，建议从0.3开始试 - 若需更复杂过渡（比如左半透明右不透明），就得用
linear-gradient(to right, rgba(...), rgba(...))
rgba() 用在 border-color 或 box-shadow 上时，逻辑完全一致——它只作用于那个属性所定义的颜色，不会波及别的东西。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
