opacity作用于整个元素及其所有子元素，呈乘性继承；rgba()仅作用于指定颜色属性的alpha通道，不影响其他样式。
opacity 是“整个盒子一起变淡”，不是“只调颜色”
当你写 opacity: 0.6，浏览器会把元素本身、它的背景、边框、阴影，连同所有子元素（、、图片、图标）全部按 60% 不透明度渲染。这不是颜色设置，而是一次性压暗整块视觉区域。
- 子元素无法“自救”：即使你在子元素里写
opacity: 1，它实际透明度仍是0.6 × 1 = 0.6—— 因为 opacity 是乘性继承，不是覆盖 - 会触发新层叠上下文：可能让
z-index行为意外变化，比如遮住本该在上层的弹窗 - 适合场景：模态框遮罩层、页面切换淡入淡出、禁用态整体灰化
rgba() 是“给某个颜色加一层透明膜”，不影响其他东西
rgba() 不是 CSS 属性，而是颜色值的一种写法。它只作用于你把它塞进去的那个属性，比如 background-color、color 或 border-color。它改的只是“那个颜色”的 alpha 通道，别的什么都不会动。
- 文字照常清晰：写
background-color: rgba(0, 0, 0, 0.2)，背景蒙一层浅灰，但里面的文字还是 100% 不透明 - 不继承、不干扰布局：父元素用
rgba()，子元素完全不受影响，z-index也照常工作 - 适合场景：卡片毛玻璃背景、文字阴影半透、按钮 hover 时仅背景渐变透明、图片上叠加可读性遮罩
别混着用：opacity + rgba 可能白忙活
同时写 opacity: 0.8 和 color: rgba(0, 0, 0, 0.8) 看似“双保险”，实际多数浏览器会以 opacity 为主导，rgba() 的 alpha 被覆盖或弱化，最终效果不可控，还增加调试成本。
- 要整体淡出 → 只用
opacity - 只要背景/文字/边框单独透明 → 只用对应属性的
rgba()（或现代写法#RRGGBBAA） - 想动态控制（比如通过 CSS 变量改背景透明度）→
rgba(0, 0, 0, var(--alpha))可行，opacity无法绑定变量做单通道调整
兼容性和 fallback 要留一手
IE9+ 支持 rgba()，IE8 及更早需 fallback；opacity 所有浏览器都支持，但旧版 IE 需用 filter: alpha(opacity=50)（已基本可忽略）。
立即学习“前端免费学习笔记（深入）”；
- 安全写法示例：
button { background-color: #007bff; background-color: rgba(0, 123, 255, 0.9); } - 8 位 HEX（如
#007bff99）等价于rgba(0,123,255,0.6)，现代浏览器支持，但部分编辑器/工具链识别不全，生产环境建议优先用rgba()
opacity: 0.9，最内层文字实际只有 0.9³ ≈ 0.73 不透明度，设计稿根本没考虑这个。而 rgba() 没这问题，它永远只管自己那一小块颜色。 
