IE8及以下不支持background: rgba()，需先写纯色fallback（如#hex或rgb()），再写rgba()声明；不可用filter: alpha()替代，因其影响整个元素；IE9+已原生支持rgba()。
IE8及以下不支持background: rgba()怎么办
直接给background写rgba()在IE8及更早版本会完全失效（背景变透明或继承父级色），因为这些浏览器根本不解析rgba()函数。必须提供纯色fallback，且顺序不能错——老浏览器按从上到下的顺序读取声明，遇到不认识的值就跳过。
正确写法是先写background: #hex或background: rgb()，再写background: rgba()：
button {
background: #007bff; /* IE8 fallback */
background: rgba(0, 123, 255, 0.8); /* 支持的浏览器覆盖 */
}
注意：不要用background-color单独写，因为background是简写属性，会重置所有子属性（如background-image）。如果已有背景图，需统一用background拼接：
div {
background: #f0f0f0 url("tile.png") repeat; /* fallback */
background: rgba(240, 240, 240, 0.6) url("tile.png") repeat; /* 覆盖 */
}
为什么filter: alpha(opacity=)不是好选择
filter: alpha(opacity=80)确实能让IE8显示半透明效果，但它作用于整个元素（包括文字、子元素），不是仅控制背景色。一旦启用，内部文字也会变淡，破坏可读性。
常见误用场景：
- 按钮带文字 +
filter→ 文字模糊难辨 - 卡片含图标和文字 → 整体“发虚”，视觉层次丢失
- 与其他CSS动画叠加时，
filter常触发重排，性能更差
除非你明确需要整块区域统一透明（比如蒙层遮罩），否则别用filter模拟背景透明。
兼容性边界要卡准：IE9+已支持rgba()
IE9是分水岭——它原生支持rgba()（包括background和color），但不支持hsla()或transparent关键字在某些上下文中。所以：
- 目标最低支持IE9？直接写
rgba()即可，无需fallback - 必须兼容IE8？只对IE8加
background: #hex，其他浏览器自动走rgba() - 用
transparent当fallback？别试——IE8把transparent当无效值，退回到父级背景色，结果不可控
验证方法：在IE8调试工具里检查Computed面板，看background-color是否解析为rgb()或#hex；若显示rgba()或空白，说明fallback没生效。
PostCSS或构建工具里自动化处理有风险
像postcss-cssnext或autoprefixer旧版插件会自动补rgb() fallback，但它们依赖静态分析，无法判断你是否真需要兼容IE8——比如你写了background: rgba(0,0,0,0.1)，它可能生成background: #000（完全不透明），这跟原意相悖。
更稳妥的做法是手动控制：
- 明确知道哪些组件需IE8支持，才加
fallback - 避免全局启用“自动补rgba fallback”类插件
- 用
@supports做渐进增强？不行——IE8不识别@supports，语法报错导致整条规则失效
真正麻烦的不是写两行CSS，而是团队协作时有人删掉fallback还自测不到IE8——上线后用户截图反馈“按钮看不见”，才想起查兼容表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
