opacity会使子元素一同变透明，因其作用于整个渲染层；而rgba()仅影响指定颜色属性，不波及后代元素。
为什么用 opacity 会让子元素也变透明
opacity 是作用于整个元素及其所有后代的渲染层，它不区分内容层级，只是把整块渲染结果按比例“淡化”。哪怕子元素自己设了 opacity: 1，也没用——因为它的父容器已经把整个图层压暗了。
用 rgba() 替代时，只改背景或文字颜色本身
rgba() 是颜色值层面的透明度控制，只影响当前属性（比如 background-color 或 color），不会传染给子元素。关键点在于：你得把原本写在 opacity 上的透明意图，拆解到具体颜色属性里。
- 背景半透：用
background-color: rgba(0, 0, 0, 0.5)，而不是opacity: 0.5 - 文字半透：用
color: rgba(255, 255, 255, 0.7)，不是靠父级opacity压出来 - 边框半透：同理，
border-color: rgba(100, 100, 100, 0.3)
注意：rgba() 的第四个参数是 alpha 值（0–1），和 opacity 数值看起来一样，但作用域完全不同。
遇到渐变、阴影或图片背景怎么办
纯色可以用 rgba()，但渐变、阴影、图片这些没法直接套 rgba()。这时候得换思路：
立即学习“前端免费学习笔记（深入）”；
- 渐变背景半透：把渐变里的颜色成分写成
rgba()，例如background: linear-gradient(to right, rgba(255,0,0,0.3), rgba(0,0,255,0.3)) - 阴影半透：用
box-shadow: 0 2px 4px rgba(0,0,0,0.2)，alpha 写在阴影颜色里 - 图片背景+半透遮罩：别用
opacity，而是加一层伪元素::before，设background-color: rgba(0,0,0,0.4)覆盖在图片上
兼容性提醒：别忘了 hsla() 和老浏览器 fallback
rgba() 在 IE9+、所有现代浏览器都支持，但如果你还要兼容 IE8，就得准备 fallback：
- 先写一个不带透明的备用色：
background-color: #000 - 再覆盖一行
background-color: rgba(0, 0, 0, 0.5)，老浏览器会忽略后一行 - 需要 hue-based 半透时（比如调色不改变亮度），用
hsla()更直观，比如color: hsla(200, 100%, 50%, 0.6)
真正容易被忽略的是：当元素有 border、outline 或 transform 时，仍可能意外触发层叠上下文，让某些半透表现和预期不一致——建议优先在纯色背景 + 文字场景验证 rgba() 行为，再逐步叠加其他样式。
