rgba()和hsla()可实现背景半透明而文字不透明，alpha值范围为0–1，仅作用于背景层；opacity会使整个元素及子元素变透明，不可取。
rgba() 设置背景色半透明但文字保持不透明
直接给 background-color 用 rgba() 是最常用且可靠的方式，文字颜色不受影响，因为透明度只作用于背景层本身。关键在于：不要给文字容器整体加 opacity，否则文字也会变淡。
常见错误是写成这样：
.box {
opacity: 0.8; /* 错！整个元素包括文字都变透明 */
background-color: #000;
}
正确做法是只让背景带 alpha 值：
.box {
background-color: rgba(0, 0, 0, 0.6); /* 黑色背景，60% 不透明（即 40% 透明）*/
color: #fff; /* 文字仍为纯白，完全不透明 */
}
-
rgba()第四个参数是 alpha，范围0（全透）到1（不透），不是百分比 - IE9+ 支持，IE8 及更早版本不支持，需备选方案（如半透明 PNG）
- 如果背景需要渐变或图片叠加，
rgba()仍可作为background列表中的一项，顺序靠前会盖在后面图层上
hsla() 实现相同效果但用色相方式控制
hsla() 和 rgba() 行为一致，只是颜色模型不同——用色相（h）、饱和度（s）、明度（l）代替红绿蓝值，最后一个 a 同样控制透明度。适合需要动态调色或设计师提供 HSL 值的场景。
.box {
background-color: hsla(200, 100%, 50%, 0.7); /* 蓝绿色背景，70% 不透明 */
color: black;
}
-
h是角度（0–360），s和l是百分比（如100%、50%），a仍是0–1小数 - 和
rgba()一样，只影响背景，不影响子元素文字或边框 - 某些 CSS 预处理器（如 Sass）能自动在
hsl()上加透明度，但原生 CSS 必须显式写hsla()
为什么不能用 opacity 或 background: transparent
opacity 会让整个元素及其所有后代一并变透明，无法单独保文字；而 background: transparent 是全透明，没有颜色可调，起不到“半透明背景”的作用。
-
opacity: 0.5→ 父容器和里面所有文字、图标、子 div 全部降为 50% 不透明 -
background: transparent→ 相当于没设背景，会透出下层内容，不是“带颜色的半透明” - 想局部控制透明，只能靠
rgba()/hsla()或伪元素 +opacity模拟（复杂且有 z-index 风险）
兼容性与 fallback 处理
现代浏览器都支持 rgba() 和 hsla()，但若需支持 IE8，得加一层不透明的备用背景色（CSS 会忽略后续不支持的声明）：
.box {
background-color: #000; /* IE8 及以下看到这个 */
background-color: rgba(0, 0, 0, 0.6); /* IE9+ 和其他现代浏览器覆盖上一行 */
color: white;
}
- 顺序不能颠倒，否则老浏览器会把整条规则丢弃
- 不需要 JS 检测，CSS 自然降级
- 如果项目已放弃 IE8，这一步可省略
真正容易被忽略的是 alpha 值的直觉误区：很多人以为 rgba(0,0,0,0.5) 是“50% 透明”，其实它是“50% 不透明”，也就是背景一半透、一半遮。调的时候建议用设计工具实时预览，别靠心算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
