opacity 作用于整个元素及其子元素，导致所有内容统一变淡且无法被子元素覆盖；rgba() 仅作用于指定颜色属性，不影响其他样式。
opacity 和 rgba 的本质区别不在“透不透”，而在“谁透”——前者是整块元素连带子孙一起变淡，后者只是给某个颜色值加个透明度参数，别的部分纹丝不动。
opacity 会让子元素“被动继承”透明，且无法靠子元素自己拉回来
当你写 opacity: 0.6，浏览器不是在“调低亮度”，而是在渲染层对整个元素及其后代做一次合成（composite）操作。子元素即使显式写了 opacity: 1，也只会让自身内容在那个已经变淡的图层上画得更亮一点，视觉上依然发虚。
- 常见错误现象：
button { opacity: 0.7; }导致文字模糊、图标边缘发灰，改opacity: 1给内部span也无效 - 真实影响范围：背景、边框、阴影、文字、图片、所有嵌套子元素，一个不落
- 副作用：触发新层叠上下文，可能打乱
z-index堆叠顺序，尤其在下拉菜单、弹窗等场景中容易被遮挡
rgba() 只作用于你明确写它的那个颜色属性，完全不传染
rgba() 不是 CSS 属性，而是颜色函数。它只改变你把它塞进去的那个值——比如 background-color: rgba(0, 0, 0, 0.3)，就只动背景色；color: rgba(255, 255, 255, 0.8)，就只动文字颜色。其他一切照常渲染。
- 典型使用场景：模态框背景半透但文字清晰、按钮 hover 时仅边框变透明、卡片阴影带透明度而不影响主体
- alpha 参数必须是 0–1 小数：写成
rgba(0, 0, 0, 50%)或rgba(0, 0, 0, 50)都会被浏览器忽略，降级为transparent或 fallback 颜色 - 兼容性注意：IE9+ 支持
rgba()，但 IE8 及更早需用 1px 半透 PNG 作background-image替代
动画和性能表现完全不同
opacity 是独立可过渡的 CSS 属性，支持 transition: opacity 0.3s，硬件加速友好，适合淡入淡出类动画。而 rgba() 的 alpha 值不能单独被 transition 控制——你没法写 transition: background-color.alpha 0.3s，浏览器根本不认。
- 想动画背景透明度？只能用
@keyframes手动定义多个rgba()值，或改用backdrop-filter: blur()+background-color: rgba()组合 - 性能敏感场景（如长列表项 hover 效果），大量用
opacity可能引发卡顿；此时用rgba()控制背景或边框更轻量 -
opacity: 0不等于display: none：元素仍占文档流、可聚焦、能响应事件，这点常被忽略
真正要调背景透明度，就锁定 background-color: rgba()；只有当你明确需要整块区域（含文字、图标、边框）统一淡化时，才考虑 opacity。别把 opacity 当成“快捷键”，它本质是渲染层控制，而 rgba() 才是语义正确的颜色表达——这点在调试盒模型时特别明显：rgba() 下 box-shadow 和 border 都清晰，opacity 下全都发灰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
