opacity使整个元素及子元素统一透明，适用于整体淡入淡出；rgba()仅让指定颜色通道透明，适合单独控制文字、背景等的透明度，且不触发新层叠上下文。
设置 opacity 时，目标元素和它内部所有子元素（包括文字、图片、背景、边框）都会按相同比例变透明。这不是“只让文字透明”的方案，而是整块区域的视觉淡化。
常见误用场景：想让文字半透但保留不透明的背景色，结果背景也变淡了。
opacity 取值范围是 0（完全透明）到 1（完全不透明），支持小数如 0.7
z-index 行为这段文字和它的父div背景都会是60%不透明
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 且背景非纯黑/纯白时，可读性迅速下降。
4.5:1；透明文字很容易跌破该阈值body 或全局 p 直接设低 alpha 的 color，应配合具体背景区域单独调整rgba(0,0,0,0.5) 在黑色背景上几乎看不见，需用 rgba(255,255,255,0.7) 替代比如同时写 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) 使用（需现代浏览器）rgba()（IE9+ 支持），若需兼容 IE8，只能用 opacity + 滤镜 hack，但已基本可忽略rgba() 是唯一干净可控的路径；opacity 是整块区域的开关，不是文字调光旋钮。细节在于：你改的是“颜色值”，还是“整个元素的渲染权重”。