应使用rgba()或hsla()为颜色属性添加alpha通道实现背景半透明，文字保持不透明；opacity作用于整个元素及所有子元素，会导致文字发虚。
该写在颜色上，而不是元素上——除非你明确需要整个元素（含文字、子节点）一起变透明。
opacity 会让所有子元素一起变淡，包括文字和图片
当你给一个 div 设置 opacity: 0.6，它的背景、边框、文字、图标、子 span 全部都会变成 60% 不透明。这不是“背景半透明”，而是整块内容被罩了一层灰膜。
- 常见错误现象：按钮加了
opacity后，文字也发虚，可读性下降 - 使用场景：遮罩层（
.overlay）、禁用状态（button:disabled）、淡入动画 - 性能影响：现代浏览器对
opacity有硬件加速优化，但频繁动画仍建议搭配will-change: opacity - 兼容性：IE9+ 原生支持；IE8 及更早需用
filter: alpha(opacity=60)（已淘汰，不建议兼容）
rgba() 或 hsla() 只影响颜色本身，文字保持清晰
想让背景是半透的，但文字还是实色？那就把透明度写进颜色值里，比如 background-color: rgba(0, 0, 0, 0.4)。这里的 0.4 是 alpha 通道，只作用于这个颜色声明，不影响任何子元素。
- 常见错误现象：误用
opacity实现“毛玻璃背景”，结果文字糊成一片 - 使用场景：卡片背景、导航栏、表单输入框、带文字的 banner 区域
- 参数差异：
rgba()接收0–255的 RGB 值 +0–1的 alpha；hsla()用色相（0–360）、饱和度/亮度（百分比）+ alpha - 注意点：不能用于 border-color 或 color 的简写语法（如
currentColor），必须显式写出带 alpha 的颜色值
伪元素方案适合复杂背景（比如渐变+透明）
当背景不是纯色，而是线性渐变或图片时，rgba() 不够用。这时可以抽离背景到 ::before 伪元素上，单独控制其透明度：
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, #000, #333);
opacity: 0.3; /* 只影响伪元素，不影响 .card 里的文字 */
z-index: -1;
}- 关键点：伪元素必须设
z-index: -1才能垫在内容下方 - 为什么不用
opacity直接套父容器？因为会连文字一起压暗 - 替代方案：CSS
backdrop-filter（仅适用于背景模糊，且不支持所有旧浏览器）
真正容易被忽略的是 alpha 值的语义混淆：它既出现在 opacity 属性里，也作为 rgba() 的第四个参数。但这两个 alpha 完全不是一回事——前者是渲染层级的全局开关，后者只是颜色通道的一个分量。写错位置，视觉效果就差一倍。
