opacity会使子元素被动变淡且无法通过自身设置恢复，因其对整棵渲染树统一应用alpha混合；应优先使用rgba()控制背景等局部透明，避免影响子元素。
opacity 会让子元素“被动变淡”，且无法靠自身设置拉回来
给父元素设 opacity: 0.6，子元素即使显式写 opacity: 1，视觉上仍是半透明——这不是 bug，是 CSS 渲染规范：opacity 在合成层对整块元素（含所有后代）做一次统一 alpha 混合，子元素的 opacity: 1 只是在那个已经变淡的图层上“尽力画满”，无法恢复原始不透明度。
- 常见错误现象：
button嵌在opacity: 0.7的卡片里，文字发灰、图标边缘模糊，加opacity: 1无效 - 副作用：触发新层叠上下文，可能让
z-index失效，下拉菜单被遮挡 - 性能提示：大量使用
opacity做 hover 动画（如长列表项），容易引发重绘卡顿
rgba() 只影响你写的那个颜色值，子元素完全不受波及
rgba() 不是属性，是颜色函数；它只改你塞进去的那个属性，比如 background-color: rgba(0, 0, 0, 0.3) 就只动背景色，color: rgba(255, 255, 255, 0.9) 就只动文字颜色，其他一切照常渲染。
- alpha 参数必须是
0–1小数：rgba(0, 0, 0, 50%)或rgba(0, 0, 0, 50)都会被浏览器忽略，降级为transparent或 fallback 颜色 - 兼容性：IE9+ 支持，IE8 及更早需用 1px 半透 PNG 替代
- 注意叠加：如果同时写了
background-image和background-color: rgba()，后者会盖在图片上，可能发灰
什么时候该用 opacity，什么时候该用 rgba()
选 opacity 只有一个明确场景：你需要整块区域（含文字、边框、阴影、子元素）一起淡入/淡出，比如模态框遮罩层动画。除此之外，只要目标只是“背景透、文字不透”或“边框微透、内容清晰”，就该锁定 rgba()。
- 别把
opacity当快捷键——它是渲染层控制，rgba()才是语义正确的颜色表达 - 调试盒模型时特别明显：
rgba()下box-shadow和border边缘锐利，opacity下全都发虚 -
opacity: 0≠display: none：元素仍占文档流、可聚焦、能响应事件，这点常被忽略
想动画背景透明度？别试 transition: background-color
background-color 的 alpha 值不能被单独过渡，transition: background-color 0.3s 对 rgba() 无效——浏览器根本不认 background-color.alpha 这种写法。
立即学习“前端免费学习笔记（深入）”；
- 可行方案：用
@keyframes手动定义多个rgba()值，或组合backdrop-filter: blur()+background-color: rgba() - 如果真要硬件加速友好、轻量过渡，
opacity仍是唯一原生支持的选项，但务必确认你真的需要整块变淡
background-color: rgba()；只有当你明确需要整块区域（含文字、图标、边框）统一淡化时，才考虑 opacity。alpha 值写错、兼容性漏测、层叠上下文误触——这些才是上线前最容易被跳过的点。 
