opacity使整个元素及子元素统一透明，适用于整体淡入淡出；rgba()仅让指定颜色通道透明，适合单独控制文字、背景等的透明度，且不触发新层叠上下文。
opacity 属性会让整个元素及其内容一起变透明
设置 opacity 时，目标元素和它内部所有子元素（包括文字、图片、背景、边框）都会按相同比例变透明。这不是“只让文字透明”的方案，而是整块区域的视觉淡化。
常见误用场景：想让文字半透但保留不透明的背景色，结果背景也变淡了。
-
opacity取值范围是0（完全透明）到1（完全不透明），支持小数如0.7 - 它会触发新层叠上下文（stacking context），可能影响
z-index行为 - 对性能较友好，浏览器优化成熟，适合做整体淡入/淡出动画
这段文字和它的父div背景都会是60%不透明
rgba() 是给颜色本身加透明通道，只影响指定属性
rgba() 不是独立样式，而是 color、background-color、border-color 等颜色类属性的取值方式。它只让“那个颜色”变透明，不影响其他部分。
这才是控制文字透明度的正确姿势：把 color 设为 rgba(r, g, b, a)。
立即学习“前端免费学习笔记（深入）”；
- 第四个参数
a是 alpha 通道，范围是0（全透）到1（不透），和opacity一致 - 可与不透明背景共存：
color: rgba(0, 0, 0, 0.5); background-color: #fff;→ 文字半透，背景纯白 - 不触发新层叠上下文，布局行为更可预测
文字是浅灰半透明，背景依然实色
透明文字在深色/浅色背景上容易看不清
用 rgba() 控制文字透明度时，对比度会随背景明暗剧烈变化。尤其当 a 且背景非纯黑/纯白时，可读性迅速下降。
- WCAG 推荐正文最小对比度为
4.5:1；透明文字很容易跌破该阈值 - 避免对
body或全局p直接设低 alpha 的color，应配合具体背景区域单独调整 - 深色模式下，同一
rgba(0,0,0,0.5)在黑色背景上几乎看不见，需用rgba(255,255,255,0.7)替代
不要混用 opacity 和 rgba 做“双重透明”
比如同时写 opacity: 0.8 和 color: rgba(0,0,0,0.8)，实际效果不是 0.8 × 0.8 = 0.64，而是由渲染引擎决定——多数浏览器最终按 opacity 主导，rgba 被覆盖或弱化，结果不可控。
- 选一种方案并坚持到底：要整体淡出用
opacity；只要文字/背景/边框单独透明，就只用对应属性的rgba()或hsla() -
opacity无法通过 CSS 变量动态控制单个颜色通道，而rgba()可以结合var(--text-alpha)使用（需现代浏览器） - 旧版 IE 不支持
rgba()（IE9+ 支持），若需兼容 IE8，只能用opacity+ 滤镜 hack，但已基本可忽略
rgba() 是唯一干净可控的路径；opacity 是整块区域的开关，不是文字调光旋钮。细节在于：你改的是“颜色值”，还是“整个元素的渲染权重”。 
