最稳兼容方案是先写 background-color: #000; 再写 background-color: rgba(0,0,0,0.6);，ie8 读第一行即停，现代浏览器覆盖第二行；background 简写会重置 background-color，故需将 rgba() 直接写入简写中；opacity 和 ie filter 会导致全局透明，不可取。
直接用 background-color: rgba()，再加一句 background-color: #000 作 fallback，就是最稳、最轻量的兼容方案。 其他绕路写法（比如 filter、IE gradient 滤镜、_filter hack）要么行为不可控，要么在现代构建流程里反而被自动删掉或覆盖，纯属给自己埋雷。
为什么不能只写 rgba()？
IE8 及更早版本完全不识别 rgba() 函数，会跳过整条声明；它也不报错，但也不会“退化”到用前面的 background-color: #000 ——除非你把那句写在前面。
- ✅ 正确顺序：
background-color: #000; background-color: rgba(0, 0, 0, 0.6);→ IE8 读到第一行就停，现代浏览器覆盖第二行 - ❌ 错误顺序：
background-color: rgba(0, 0, 0, 0.6); background-color: #000;→ IE8 直接丢弃整条规则，背景变透明（或继承父级） - ⚠️ 如果项目已明确放弃 IE8，且确认构建工具（如 PostCSS + autoprefixer）没注入旧兼容代码，那单写
rgba()就够了
background 简写会悄悄干掉 rgba()
很多人写了 background-color: rgba(0, 0, 0, 0.5)，后面又补一句 background: #000 url(bg.png)，结果透明失效——因为 background 是复合属性，会重置所有子属性（包括 background-color）为初始值。
- ✅ 正确写法：
background: rgba(0, 0, 0, 0.5) url(bg.png) no-repeat center;，把rgba()当作颜色值直接塞进简写里 - ✅ 渐变叠加也一样：
background: rgba(0, 0, 0, 0.3), linear-gradient(to right, #f00, #00f); - ❌ 别混用：先设
background-color，再用background简写，前者必被清空
别碰 opacity 和 IE filter 来实现“背景透、文字不透”
opacity: 0.7 或 filter: alpha(opacity=70) 是全局透明，文字、子元素、边框全跟着虚，加 opacity: 1 也救不回来——层叠上下文决定了它无法局部恢复。
- ❌ 错误目标：
.card { opacity: 0.7; color: #fff; }→ 文字照样发灰 - ✅ 唯一正解：
.card { background-color: rgba(0, 0, 0, 0.7); color: #fff; } - ⚠️ IE gradient 滤镜（
progid:DXImageTransform.Microsoft.gradient）在 IE8 下混合逻辑和rgba()不一致，且 IE9+ 已支持rgba()，没必要引入不稳定 hack
最容易被忽略的点是：RGBA 的 alpha 参数必须是 0–1 的小数，不是百分比，也不是整数；0.7 ≠ 70%，也 ≠ 70。写错会导致整条声明无效，而浏览器不会提示——它只是安静地跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
