rgba() 用于控制颜色透明度（如背景），opacity 用于控制整个元素及其子元素的透明度；混用会导致意外叠加效果，且二者适用场景不同，需按需选择。
要控制透明效果，rgba() 和 opacity 不是“哪个更好”，而是“谁该管哪块”。选错会导致文字发虚、子元素意外变淡、动画卡顿或 z-index 错乱——这些都不是 bug，是它们的设计本意。
背景透明但文字要清晰？必须用 rgba()
这是最常踩坑的场景。比如导航栏需要半透黑底+白色文字，或者卡片加一层毛玻璃感背景。
-
background-color: rgba(0, 0, 0, 0.3)只动背景，文字、图标、子元素全保持原样 - 若误用
opacity: 0.3，整个导航栏连同 logo 和按钮文字都会变成灰蒙蒙的，且子元素设opacity: 1也拉不回来 - 注意 alpha 值必须是小数（
0.3），写成30%或30会被浏览器忽略，降级为transparent或纯黑 - 兼容性放心：IE9+、所有现代浏览器都支持，老项目不用垫 PNG
要做淡入淡出动画？优先用 opacity
模态框显示/隐藏、加载遮罩层渐隐、hover 整体弱化等，opacity 是唯一能直接过渡的方案。
-
transition: opacity 0.2s ease可直接生效；而background-color: rgba(...)的 alpha 值无法单独被transition控制 - 想动画背景透明度？只能靠
@keyframes手动写多个rgba()值，或搭配backdrop-filter: blur()用 - 性能上，
opacity通常触发 GPU 加速，但大量元素同时用（如长列表 hover）可能引发卡顿，此时改用rgba()更轻量 - 别忘了副作用：
opacity会创建新层叠上下文，可能让下拉菜单被遮住——检查 z-index 是否还按预期堆叠
为什么不能混着写还指望它“更透明”？
opacity 和 rgba() 的透明机制完全不同：前者是渲染层合成，后者是颜色值计算。叠加不是线性相乘，而是分层处理，容易出意料之外的效果。
- 给一个
div同时设opacity: 0.5和background-color: rgba(0,0,0,0.5)，最终背景不是 0.25 透明，而是先渲染半透背景，再对整个元素做一次 0.5 合成 —— 视觉上更暗、更浑浊 - 边框或阴影里用
rgba()要加 fallback：border-color: #000; border-color: rgba(0,0,0,0.2)，因为某些旧版 Android WebView 对border-color: rgba()支持不稳定 -
background-color: transparent比rgba(0,0,0,0)更稳妥，后者在极个别 Safari 版本中可能被解析为黑色再透明，导致抗锯齿异常
真正难的不是语法，而是判断“这个透明，到底该由谁来负责”：是颜色本身要透，还是整个视觉单元要退场。一旦混淆，调试时看到的就不是样式问题，而是布局和交互的连锁崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
