opacity作用于整个元素及其子内容，导致所有内容变淡；rgba()仅影响指定颜色的透明度，可实现背景半透而文字不透。
css中opacity和rgba()对颜色的影响完全不同
opacity是作用于整个元素及其所有子内容的全局透明度，它会让文字、边框、背景、阴影一并变淡；而rgba()（或hsla()）只影响指定颜色通道的alpha值，比如仅让背景半透，文字仍保持100%不透明。这是最常被混淆的起点——改错方式会导致整块区域可读性骤降。
用opacity调背景时，子元素文字也会变灰，容易看不清
典型场景：给一个<div>设<code>opacity: 0.7，里面放<p></p>和<button></button>，结果所有内容都发虚。这不是bug，是规范行为。浏览器把整个渲染层压成一张图再叠上透明度，无法单独保留子元素的原始对比度。
- 若只要背景透、文字不透，必须改用
background-color: rgba(255, 255, 255, 0.7) - 若用
opacity，需把文字/控件抽离到同级容器，并用position: relative+z-index盖在上面 -
opacity值小于0.3时，AA级可访问性通常不达标（对比度不足4.5:1）
rgba()背景不会影响文字，但叠加顺序决定最终视觉效果
当父容器有深色背景、子元素用rgba(255, 255, 255, 0.1)做浅色覆盖层时，实际看到的颜色是混合结果，不是简单“白色+透明”。浏览器按层叠上下文逐层合成，所以：
- 同一容器内多个
rgba()背景（如background: linear-gradient(...), rgba(...)）会按逗号顺序从上到下叠加 - 如果父元素本身有透明背景，子元素的
rgba()会与之复合，可能比预期更透 - 避免在
body或html上直接设rgba()背景——它可能意外影响伪元素或第三方组件的默认色
IE8及更早版本不支持rgba()和opacity，但处理方式不同
IE8识别opacity（需写filter: alpha(opacity=70)），但完全忽略rgba()，会退回到background-color声明的前一个有效值（比如#fff）。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 用
rgba()时，务必前置一个纯色background-color作为fallback -
opacity在IE8中会触发hasLayout，可能引发浮动塌陷或margin重叠 - 现代项目若已放弃IE支持，优先用
rgba()而非opacity控制局部透明，更可控
rgba()。整块卡片需要呼吸感且内部结构简单？opacity更省事。但只要里面含输入框、小字号文本或图标，就得立刻切回rgba()方案。
