应优先用rgba实现背景半透明而文字清晰，因opacity会使整个元素及子元素统一透明且无法单独控制；rgba仅作用于指定颜色属性，互不干扰，且不触发新的堆叠上下文。
opacity 会让整个元素及其子元素一起变透明
很多人想让背景半透明，结果发现文字也跟着发虚——opacity 控制的是整个渲染盒子的透明度，包括所有子节点。它不区分背景、文字或边框，只要在同一个 DOM 节点上设置，就全按比例“透”过去。
-
opacity: 0.5会让元素自身和所有子元素都变成 50% 透明，无法单独控制某一部分 - 如果父容器设了
opacity，子元素即使写opacity: 1也无效（继承 + 叠加计算） - 会影响可访问性：屏幕阅读器可能因视觉弱化误判内容重要性
- 动画中用
opacity性能尚可（触发合成），但若同时有 transform 或 filter，需留意层叠上下文变化
RGBA 颜色只作用于当前属性值，不影响子元素
想让背景半透明而文字保持清晰？直接给 background-color 用 rgba(0, 0, 0, 0.3) 就行。RGBA 是颜色模型的一部分，只改变该颜色通道的 alpha 值，和元素结构完全解耦。
-
color: rgba(255, 0, 0, 0.8)→ 文字红且 80% 不透明；background-color: rgba(0, 0, 0, 0.1)→ 背景黑且 10% 不透明；互不干扰 - 支持所有接受颜色值的 CSS 属性：
border-color、box-shadow、text-shadow都能用 - 注意：IE8 及更早版本不支持 RGBA，但现代项目基本不用考虑；如需兼容，可用
background: #0000001a（HEX8）替代
HEX8 和 RGB 与 RGBA 的实际效果差异
现在主流浏览器都支持 8 位 HEX（如 #00000033），它等价于 rgba(0, 0, 0, 0.2)（33₁₆ ≈ 51/255 ≈ 0.2）。但别以为写成 rgb(0, 0, 0, 0.2) 就能用——rgb() 不接受 alpha 参数，必须写 rgba() 或 #rrggbbaa。
-
rgb(0,0,0,0.2)是无效语法，会被浏览器直接忽略 -
rgba(0,0,0,0.2)和#00000033渲染效果一致，但后者更简洁，适合工具链自动压缩 - 用预处理器（如 Sass）时，
fade-out(black, 0.8)编译后仍是rgba()，本质没变
什么时候非得用 opacity，而不是 RGBA
只有两种典型场景绕不开 opacity：需要整块区域（含图标、文字、边框）统一淡入/淡出；或者要实现「玻璃态」叠加效果（比如模态框遮罩层），此时你本来就要压暗整个子树。
- 做 loading 动画遮罩时：
div.overlay { opacity: 0.6; background: black; }—— 这里用rgba()也可以，但语义上更推荐opacity，因为遮罩本就是整体行为 - 配合
transition做显示隐藏时，opacity+visibility组合比反复改rgba()更轻量 - 切记：如果遮罩层里嵌了按钮，又希望按钮文字不透明，就得把按钮提出来放到同级，不能塞在遮罩内部
opacity 会强制创建新的堆叠上下文，可能意外改变 z-index 行为；而 rgba() 完全不触发这个机制。调样式时如果发现元素突然被盖住了，先查查父级有没有悄悄加了 opacity。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
