opacity作用于整个元素及其子内容，导致所有内容变淡；rgba()仅影响指定颜色的透明度，可实现背景半透而文字不透。
css中opacity和rgba()对颜色的影响完全不同
opacity是作用于整个元素及其所有子内容的全局透明度，它会让文字、边框、背景、阴影一并变淡；而rgba()（或hsla()）只影响指定颜色通道的alpha值，比如仅让背景半透，文字仍保持100%不透明。这是最常被混淆的起点——改错方式会导致整块区域可读性骤降。
用opacity调背景时，子元素文字也会变灰，容易看不清
典型场景：给一个 当父容器有深色背景、子元素用 IE8识别 立即学习“前端免费学习笔记（深入）”；opacity: 0.7，里面放和，结果所有内容都发虚。这不是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，但处理方式不同opacity（需写filter: alpha(opacity=70)），但完全忽略rgba()，会退回到background-color声明的前一个有效值（比如#fff）。这意味着：
真正难的是判断该用哪个——不是看“想不想透”，而是看“哪些东西必须保持清晰”。背景透、文字不透？选rgba()时，务必前置一个纯色background-color作为fallbackopacity在IE8中会触发hasLayout，可能引发浮动塌陷或margin重叠rgba()而非opacity控制局部透明，更可控rgba()。整块卡片需要呼吸感且内部结构简单？opacity更省事。但只要里面含输入框、小字号文本或图标，就得立刻切回rgba()方案。
