应使用 background-color 配合 rgba() 或 hsla() 实现背景半透明，避免 opacity；因 opacity 会全局降低子元素（含文字）透明度且无法逆转，而 rgba()/hsla() 仅作用于背景色本身，兼容性好并支持 fallback。
直接用 background-color 配合 rgba() 或 hsla()，别碰 opacity ——后者会让文字一起变淡，不是你想要的。
为什么不能用 opacity？
opacity 作用于整个元素及其所有子节点，包括文字、图标、内联元素。设成 0.6，文字就真变模糊了，无法单独“救回来”。
- 常见错误写法：
opacity: 0.6+color: #fff→ 文字灰蒙蒙，可读性差 - IE9+ 才支持
opacity，IE8 及更早版本需filter: Alpha(opacity=60)，但同样污染子元素 - 即使套一层 wrapper 再反向提升文字 opacity，也无法精确抵消（CSS 不支持“负透明度”）
用 rgba() 设置背景色最稳妥
rgba() 只影响颜色本身，不牵连文字或边框，是现代标准下的首选。
- 语法：
background-color: rgba(255, 255, 255, 0.7)—— 最后一位是 alpha，0～1 小数，不是百分比 - 红绿蓝值可用 0–255 整数，也可用 0%–100% 百分比（如
rgba(100%, 50%, 0%, 0.8)） - 和
background-image共存时，rgba()放在background值前面，会盖在图片上层（例：background: rgba(0,0,0,0.5), url(bg.jpg)） - IE9+、Chrome、Firefox、Safari、Opera 全支持；IE8 及更早版本完全忽略该声明，会回退到前一条纯色声明（所以记得写 fallback）
兼容 IE8 的 fallback 写法
IE8 不解析 rgba()，但会跳过它，执行前面那条不带 alpha 的 background-color。利用这点做降级：
.card {
background-color: #333; /* IE8 及以下看到这个 */
background-color: rgba(51, 51, 51, 0.8); /* 现代浏览器覆盖它 */
color: white;
}
- 顺序不能颠倒：老浏览器按 CSS 解析顺序取第一个有效声明
- 别指望 IE8 实现“半透明黑底白字”，它只能显示不透明纯色；若必须视觉一致，得用半透明 PNG 作为
background-image - 某些预处理器（如 Sass）能自动编译出 IE8 兼容的 filter 替代方案，但原生 CSS 没必要折腾
hsla() 和 rgba() 选哪个？
行为完全一致，只是颜色模型不同：hsla() 用色相（h）、饱和度（s）、明度（l）描述颜色，适合设计师给 HSL 值或需要动态调色的场景。
- 示例：
background-color: hsla(210, 100%, 40%, 0.75)→ 深蓝背景，75% 不透明 -
h是角度（0–360），s和l是百分比（如50%），a还是 0–1 小数 - Sass 中
hsl($color, $alpha)会被转成hsla()，但原生 CSS 必须显式写hsla()，hsl()不带透明度 - 如果项目已用 HSL 色系管理主题色，优先用
hsla()；否则rgba()更直观
真正容易被忽略的是：伪元素遮罩或双层结构虽能绕过兼容限制，但引入 z-index 层级风险、增加 DOM 复杂度，且对可访问性（如屏幕阅读器）不友好。除非明确要支持 IE6–8 且设计强制要求半透明效果，否则老老实实用 rgba() + fallback 就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
