background-color: rgba() 是唯一正解：它仅使背景色透明，文字、边框及子元素保持不透明；alpha 值必须为 0–1 小数，不可用百分比或整数，且需前置 fallback 色兼容 ie8。
background-color: rgba() 是唯一正解
想让背景半透、文字坚挺，background-color: rgba() 是唯一直接、干净、无副作用的方案。它只改颜色层的 alpha 通道，文字、边框、子元素全都不受影响。别碰 opacity——它一上，整个元素盒连带所有后代一起发虚，再给文字加 opacity: 1 也救不回来。
- 错误写法：
.card { opacity: 0.7; background-color: #000; }→ 文字、图标、下划线全变灰 - 正确写法：
.card { background-color: rgba(0, 0, 0, 0.7); color: #fff; }→ 背景透，文字实 -
rgba()第四个参数是 alpha，范围是0（全透）到1（不透），不是百分比；0.7≠70%，就是 0.7 - 如果原来写了
background-color: #000，必须删掉或覆盖，否则老浏览器看到纯色就停在那里，新浏览器也不会自动“升级”成 rgba
background 简写会悄悄干掉 rgba()
很多人用 background 简写时踩坑：明明写了 background-color: rgba(0,0,0,0.5)，后面又来一句 background: #000 url(bg.png)，结果 rgba 直接失效——因为 background 是复合属性，会重置所有子项为初始值。
- 错误顺序：
background-color: rgba(0,0,0,0.5); background: #000 url(img.png);→ 前者被后者清空 - 正确写法：
background: rgba(0,0,0,0.5) url(img.png) no-repeat center;，把 rgba 当作颜色值直接塞进简写里 - 如果要用渐变叠加透明色，也得把 rgba 放在
background值最前面，例如：background: rgba(0,0,0,0.3), linear-gradient(to right, #f00, #00f);
IE8 及更早版本不支持 rgba() 怎么办
IE8 及以下根本解析不了 rgba()，会直接跳过整条声明。但它不会报错，也不会影响其他样式——只要兜底色写在前面，就能安全降级。
- 必须按顺序写：
background-color: #000; background-color: rgba(0, 0, 0, 0.5);→ IE8 看到第一个就停，现代浏览器覆盖第二个 - 反过来写（
rgba在前、纯色在后）不行，IE8 会整条规则丢弃 - 别用
filter: progid:DXImageTransform.Microsoft.gradient模拟，它在 IE8 下行为不稳定，且无法精确匹配 rgba 的混合逻辑 - 如果项目已明确放弃 IE8，就不用写兜底——但得确认构建流程没被 autoprefixer 或旧版 postcss 自动注入兼容代码
rgba() 和 hsla() 别混着调色
两者行为一致，都只作用于颜色本身，但模型不同：rgba() 基于红绿蓝分量，hsla() 基于色相、饱和度、明度。除非设计稿明确给的是 HSL 值，或者你正在用 JS 动态调节色相，否则没必要切过去。
- 混用容易出错：比如把设计师给的
hsl(200, 100%, 50%)手动转成rgb()再套rgba()，中间一步算错 alpha 就偏色 - 同个项目里保持一种颜色模型，降低维护成本；若已用 HSL 体系，优先用
hsla()，别为了“看起来像 rgb”硬转 -
hsla()的 alpha 含义和rgba()完全一样，也是0～1，不是百分比
background 给静默干掉了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
