应优先使用 rgba() 或 hsla() 设置背景透明度，如 rgba(0, 0, 0, 0.3)，可保持文字和子元素完全不透明；误用 opacity 会导致整个元素（含文字、边框等）一同变透明，且子元素无法通过 opacity: 1 覆盖。
只想背景透，别动文字和子元素——用 rgba() 或 hsla()
直接给 background-color 赋值 rgba(0, 0, 0, 0.3) 或 hsla(210, 20%, 40%, 0.3)，就能让背景色带透明度，而文字、图标、子容器完全不受影响。这是最常用也最安全的做法。
常见错误现象：background-color: rgb(0, 0, 0, 0.3) 不生效——rgb() 没有 alpha 参数，第四个值会被浏览器忽略，整条声明退化为 rgb(0, 0, 0)（即纯黑）。
-
rgba()的 alpha 值必须是 0~1 的小数（如0.4），不能写成40% -
hsla()的saturation和lightness必须带%单位，比如60%，漏掉会整条失效 - IE9+ 全支持，现代项目基本不用考虑降级
整个盒子（含文字、图片、边框）一起淡入淡出——用 opacity
opacity: 0.4 是作用于整个元素渲染层的“蒙版”，它会让背景、文字、子元素、阴影、边框全部按相同比例变透明。适合做遮罩层、禁用态反馈、淡入动画。
常见错误现象：给按钮加了 opacity: 0.6，结果按钮里的文字也发虚看不清——这不是 bug，是设计如此；子元素即使显式写了 opacity: 1，视觉上仍受父级压制。
立即学习“前端免费学习笔记（深入）”；
-
opacity值为0时元素不可见，但仍占据布局空间、可响应事件（需额外加pointer-events: none才禁用交互） - 可直接参与
transition，比如transition: opacity 0.2s ease，动画平滑可靠 - 不推荐用于仅调背景的场景，否则会连带污染内容可读性
为什么不能对 background-color 的 alpha 单独做过渡？
你没法写 transition: background-color 0.3s 让 rgba() 的透明度单独动起来。浏览器不支持对颜色函数中的某个通道（比如 alpha）做独立插值，它只会把整个颜色值当离散快照处理，过渡效果生硬甚至不触发。
如果真需要背景透明度渐变动画，有两个可行路径：
- 用
opacity动画（但注意它会连带文字一起动） - 用 CSS 变量 +
rgba()，比如background-color: rgba(0, 0, 0, var(--bg-alpha));，再通过 JS 或伪类动态改--bg-alpha值（此时需配合transition: background-color，现代浏览器已支持变量驱动的颜色过渡）
选 rgba() 还是 hsla()？看你怎么调色
两者在透明度能力上完全等价，差异只在前三个参数的建模逻辑：rgba() 是数值直觉型（红绿蓝强度），hsla() 是调色盘型（色相环+饱和/明暗）。
如果你常从设计稿取色号（如 #4a90e2），转成 rgba() 更顺手；如果习惯拖 Figma 的 HSL 滑块调氛围感，hsla() 写起来更自然。
- 转换工具建议：Chrome DevTools 颜色拾取器里点开颜色弹窗，可一键切换 rgb/hsl/HEX 表示，并实时调 alpha
- 别混用模型写法，比如
hsla(200, 100%, 50%, 0.5)不能简写成hsl(200, 100%, 50%, 0.5)（hsl()不接受第四个参数）
opacity——这个属性没有局部性，它天生就是全局的。 
