opacity作用于整个元素及其子元素，无法单独恢复子元素不透明度；rgba()仅控制颜色通道透明度，不影响子元素，适用于背景、边框、文字等单属性透明设置。
opacity 会让整个元素及其子元素一起变透明
设置 opacity: 0.5 后，不仅当前元素背景和边框变半透，里面所有文字、图片、子容器也会同步降低透明度，且无法单独恢复子元素的不透明度。这是它最常被误用的地方。
常见错误现象：给一个带文字的卡片加 opacity: 0.7，结果文字也发虚看不清，想单独让文字不透明却做不到。
- 适用于需要整体淡入/淡出的动画场景（如模态框遮罩）
- 值范围是
0（全透明）到1（不透明），不支持百分比写法 - 会触发新层叠上下文，可能意外影响
z-index行为
rgba() 只控制单个颜色通道的透明度
rgba() 是颜色函数，只能用于设置颜色相关属性：比如 background-color、color、border-color。它不会影响元素结构或子元素，只改变“这个颜色本身”的透明度。
典型使用场景：给背景加半透但保留文字清晰；用半透描边做柔和轮廓；按钮悬停时仅背景渐变透明而不影响图标。
立即学习“前端免费学习笔记（深入）”；
-
rgba(0, 0, 0, 0.3)中第四个参数是 alpha 值，范围0～1，和opacity数值含义一致但作用域完全不同 - 不能用于
opacity属性本身（opacity: rgba(0,0,0,0.5)是无效语法） - IE8 及更早版本不支持
rgba()，需提供fallback颜色（如先写#000再写rgba()）
什么时候该选哪个？看你要透明的是“颜色”还是“整个盒子”
如果只是想让背景蒙一层灰而不影响文字，用 background-color: rgba(0, 0, 0, 0.2)；如果要做页面级淡出动画（比如路由切换），用 opacity 更直接。
- 要透明的是背景 → 优先
rgba()或hsla() - 要透明的是整个组件（含内嵌内容）→ 用
opacity - 需要过渡动画且涉及重绘性能 →
opacity更高效（GPU 加速友好），rgba()在某些旧浏览器中动画可能卡顿 - 需要响应式透明控制（比如根据 props 动态改背景透明度）→
rgba()更易维护，避免父子透明度叠加问题
/* 正确示例：背景半透，文字完全不透明 */ .card { background-color: #fff; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); z-index: -1; } / 错误示例：opacity 导致文字也被压暗 / .bad-card { opacity: 0.9; / 子元素里的 和
全部变灰，无法单独调亮
/ }
真正容易被忽略的是：当父元素用了 opacity，子元素即使强行设 opacity: 1 也无法恢复原始不透明度——因为它是相对于父级计算的乘积结果。这种叠加行为在复杂布局里会悄无声息地破坏设计预期。