opacity作用于整个元素及其所有子元素,呈乘性继承;rgba()仅作用于指定颜色属性的alpha通道,不影响其他样式。

opacity 是“整个盒子一起变淡”,不是“只调颜色”
当你写 opacity: 0.6,浏览器会把元素本身、它的背景、边框、阴影,连同所有子元素(、、图片、图标)全部按 60% 不透明度渲染。这不是颜色设置,而是一次性压暗整块视觉区域。
- 子元素无法“自救”:即使你在子元素里写
opacity: 1,它实际透明度仍是0.6 × 1 = 0.6—— 因为 opacity 是乘性继承,不是覆盖 - 会触发新层叠上下文:可能让
z-index行为意外变化,比如遮住本该在上层的弹窗 - 适合场景:模态框遮罩层、页面切换淡入淡出、禁用态整体灰化
rgba() 是“给某个颜色加一层透明膜”,不影响其他东西
rgba() 不是 CSS 属性,而是颜色值的一种写法。它只作用于你把它塞进去的那个属性,比如 background-color、color 或 border-color。它改的只是“那个颜色”的 alpha 通道,别的什么都不会动。
- 文字照常清晰:写
background-color: rgba(0, 0, 0, 0.2),背景蒙一层浅灰,但里面的文字还是 100% 不透明 - 不继承、不干扰布局:父元素用
rgba(),子元素完全不受影响,z-index也照常工作 - 适合场景:卡片毛玻璃背景、文字阴影半透、按钮 hover 时仅背景渐变透明、图片上叠加可读性遮罩
别混着用:opacity + rgba 可能白忙活
同时写 opacity: 0.8 和 color: rgba(0, 0, 0, 0.8) 看似“双保险”,实际多数浏览器会以 opacity 为主导,rgba() 的 alpha 被覆盖或弱化,最终效果不可控,还增加调试成本。
- 要整体淡出 → 只用
opacity - 只要背景/文字/边框单独透明 → 只用对应属性的
rgba()(或现代写法#RRGGBBAA) - 想动态控制(比如通过 CSS 变量改背景透明度)→
rgba(0, 0, 0, var(--alpha))可行,opacity无法绑定变量做单通道调整
兼容性和 fallback 要留一手
IE9+ 支持 rgba(),IE8 及更早需 fallback;opacity 所有浏览器都支持,但旧版 IE 需用 filter: alpha(opacity=50)(已基本可忽略)。
立即学习“前端免费学习笔记(深入)”;
- 安全写法示例:
button { background-color: #007bff; background-color: rgba(0, 123, 255, 0.9); } - 8 位 HEX(如
#007bff99)等价于rgba(0,123,255,0.6),现代浏览器支持,但部分编辑器/工具链识别不全,生产环境建议优先用rgba()
opacity: 0.9,最内层文字实际只有 0.9³ ≈ 0.73 不透明度,设计稿根本没考虑这个。而 rgba() 没这问题,它永远只管自己那一小块颜色。










