应使用 rgba() 设置背景色实现半透明效果，如 background-color: rgba(0, 0, 0, 0.6)，其 alpha 值仅作用于颜色本身，文字保持完全不透明，兼容 IE9+，避免误用 opacity 或 unsupported 语法。
直接给元素设置 opacity 会让整个元素（包括文字、子元素）都变透明，这不是我们想要的。正确做法是只让背景半透明，文字保持完全不透明——用 rgba() 设置背景色即可。
用 rgba() 给 background-color 加透明度
rgba() 中的 a 就是 alpha（透明度），取值范围是 0（全透）到 1（不透明）。只作用于颜色本身，不影响文字或其他内容。
- 例如：
background-color: rgba(0, 0, 0, 0.6);—— 黑色背景，60% 不透明（即 40% 透明） - 文字默认仍是 100% 不透明，无需额外处理
- 支持所有现代浏览器，兼容性好（IE9+）
避免误用 opacity 或 background: transparent
opacity: 0.6 会把整个盒子连同文字一起变淡，不推荐；background: transparent 是全透明，没有半透效果。
- 别写：
opacity: 0.6;（影响文字） - 别依赖：
background: hsla(...)或background: #0008（后者是 CSS 颜色新语法，部分旧浏览器不支持） - 优先选
rgba(r, g, b, a)，最稳妥直观
需要渐变或图片背景时怎么办
纯色背景用 rgba() 很方便；如果要用半透明的渐变或图片背景，可以用多层 background 叠加：
立即学习“前端免费学习笔记（深入）”；
- 先放一层
rgba()色块做底（控制透明度） - 再叠一层
linear-gradient()或url(...)，用background-blend-mode或透明度微调视觉效果 - 更简单的方式：用伪元素
::before单独承载半透明背景，主体内容自然不受影响
小技巧：快速换算十六进制色 + 透明度
如果你只有 #333 这类颜色，想转成半透明，可以手动换算：
-
#333→rgb(51, 51, 51)→rgba(51, 51, 51, 0.7) - 或者用在线工具/编辑器插件一键转换（搜 “hex to rgba”）
- 注意：不要写
rgba(#333, 0.7)，CSS 不支持这种写法
