opacity使整个元素及子元素统一变淡且无法挽回，因渲染层对整块元素做alpha混合；rgba()仅作用于指定颜色属性，不影响子元素。
opacity会让整个元素连子元素一起变淡，改不回来
给父元素写 opacity: 0.6，子元素即使显式写 opacity: 1，文字依然发虚——这不是 bug，是渲染层合成行为：浏览器对整块元素（含所有后代）做一次统一 alpha 混合。常见错误现象包括按钮文字边缘模糊、图标细节丢失、弹窗内表单控件可读性下降。
它还会触发新层叠上下文，导致 z-index 失效，比如下拉菜单被半透明卡片遮住，排查时容易忽略这个副作用。
关键点：
-
opacity: 0不等于display: none：元素仍占文档流、能响应点击、可被键盘聚焦 - 动画友好：
transition: opacity 0.3s可硬件加速，适合淡入淡出类交互 - 慎用于长列表项 hover 效果：大量元素同时触发动画可能卡顿
rgba()只动你写的那个颜色，别的照常
rgba() 不是属性，是颜色函数，必须绑定在具体颜色声明上，比如 background-color: rgba(0, 0, 0, 0.3) 或 color: rgba(255, 255, 255, 0.8)。它只影响该属性值，子元素完全不受干扰。
立即学习“前端免费学习笔记（深入）”；
典型使用场景：模态框背景半透但标题文字锐利、卡片边框带透明度而内容不变、文字阴影用 text-shadow: 0 0 4px rgba(0,0,0,0.2) 避免全局变灰。
注意：
- alpha 参数必须是 0–1 小数：
rgba(0,0,0,50%)或rgba(0,0,0,50)全部无效，降级为transparent -
border-color和box-shadow中用rgba()兼容性不稳定，建议加 fallback：border-color: #000; border-color: rgba(0,0,0,0.2); - 无法单独过渡 alpha 值：
transition: background-color 0.3s会过渡整个颜色（R/G/B/A），不是“只动透明度”
什么时候该用哪个？看你要“蒙谁”
本质区别不在“透不透”，而在“谁透”：
- 要整体淡出/禁用态/遮罩层 → 选
opacity - 要背景透但文字清、边框透但图标实、阴影透但主体硬 → 锁定
background-color: rgba()、border-color: rgba()等 - 想动画背景透明度？只能靠
@keyframes手动定义多个rgba()值，或组合backdrop-filter: blur()+background-color: rgba()
IE8 及更早不支持 rgba()，需用 1px 半透 PNG 当 background-image 替代；opacity IE9+ 支持，但 IE8 用 filter: alpha(opacity=60)（已过时，仅作兼容参考）。
容易被忽略的细节：alpha 值不是同一类参数
opacity: 0.4 是独立 CSS 属性，可开关、可继承、可参与 transition；rgba(255,255,255,0.4) 是颜色值的一部分，脱离了 background-color 或 color 就毫无意义。
性能上，opacity 触发 repaint，rgba() 仅影响颜色计算，对大量元素做 hover 效果时，后者更轻量。但若误把 opacity 当成“背景透明开关”用，结果文字糊成一片，再怎么调子元素 opacity 都救不回来——这时候得回头重写 background-color。
