opacity让整个元素及子元素被动变透明，是规范设计行为；rgba()仅作用于指定颜色属性，不继承、不影响子元素，但无法单独动画alpha值。
opacity会让子元素“被动变透明”，这不是Bug，是设计行为
给父容器写 opacity: 0.6，里面文字、按钮、图片全跟着发虚——这不是渲染异常，而是规范明确规定的继承机制。子元素没有显式设置 opacity 时，会按父级值参与合成；即使写了 opacity: 1，最终效果也是 0.6 × 1 = 0.6，无法突破父层限制。
rgba()只改颜色，不碰子元素，但必须绑定到具体属性上
rgba() 不是 CSS 属性，是颜色函数，必须配合 background-color、color 或 border-color 等使用。它只影响那个被赋值的属性：比如 background-color: rgba(0, 0, 0, 0.3) 只让背景透，文字照常清晰；color: rgba(255, 255, 255, 0.8) 只调文字透明度，不影响背景。
- 不能单独写
rgba(0, 0, 0, 0.3)，会报错 - 不能对
rgba()的 alpha 值做transition（浏览器不支持transition: background-color中的 alpha 单独过渡） - 若需动画背景透明度，得用
opacity或 CSS 变量 +@keyframes
什么时候该用opacity，什么时候该用rgba()
选错会导致 UI 意外失真：
- 做遮罩层、弹窗淡入/淡出、禁用态整体灰化 → 用
opacity - 要毛玻璃背景、半透底栏、带透明描边的图标、文字阴影微调 → 用
rgba()（或hsla()） - 想让子元素“逃出”父级透明控制 → 别用
opacity，改用rgba()配合定位脱离文档流（如绝对定位子元素），或把子元素提到 DOM 同级
IE8兼容是个历史包袱，但现在基本可忽略
现代项目中，rgba() 在 IE9+、Chrome、Firefox、Safari、Opera 全系支持；opacity 在 IE9+ 原生支持，IE8 需 filter: alpha(opacity=60)。但注意：
- IE9 同时写
opacity和rgba()可能冲突，导致透明失效 - 如果必须兼容 IE8，
opacity更稳妥（filter兼容性更好），rgba()得降级为纯色+PNG背景图 - 当前时间是 2026 年，绝大多数生产环境已无 IE8 支持需求
真正容易被忽略的是：**opacity 触发重绘成本更高**，尤其在含大量子节点的滚动区域里频繁动画，可能卡顿；而 rgba() 仅影响单个颜色通道，性能更轻量。但反过来，rgba() 的 alpha 无法独立动画，这点常被误判为“功能缺陷”，其实是机制使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
