ie8及更早版本忽略rgba()声明，需先写6位十六进制兜底色再写rgba()，并用filter: progid:dximagetransform.microsoft.gradient模拟半透明背景，alpha值须精确换算为两位十六进制。
IE8及更早版本直接忽略rgba()声明
不是“透明度不生效”，而是整个background-color: rgba(...)规则被浏览器解析器跳过，退回到上一条有效的颜色声明（比如#000）或默认值。如果你只写了rgba()没写兜底色，IE8下背景会变成完全透明——露出父级背景甚至body底色。
必须按顺序写两行：background-color: #000000;（IE能认），再写background-color: rgba(0, 0, 0, 0.5);（现代浏览器覆盖）。不能反过来，否则IE8连兜底色都看不到。
- 十六进制兜底色必须是6位（如
#336699），不能简写成#369 - RGBA参数逗号后不能有空格（
rgba(255,107,53,0.6)✅，rgba(255, 107, 53, 0.6)❌在Chrome 6–12会失效） - alpha值必须是0–1的小数，不是百分比（
0.6✅，60%❌）
filter: progid:DXImageTransform.Microsoft.gradient不是渐变，是ARGB模拟
IE8不支持filter: alpha(opacity=50)做背景色透明——它只作用于整个元素（含子元素），且对行内元素无效。真正能模拟单色半透明的是gradient滤镜，靠startColorstr和endColorstr设成相同值来“假装”无渐变。
比如rgba(255, 255, 255, 0.8)对应#CCFFFFFF：前两位CC是alpha×255取整后的十六进制（0.8 × 255 = 204 → CC），后六位FFFFFF是RGB部分。
- 透明度换算必须用公式：
Math.floor(a * 255).toString(16).padStart(2, '0')，不能心算或查表硬编码 -
startColorstr和endColorstr大小写要统一（推荐全大写），IE8对大小写敏感 - 这个滤镜会强制触发
hasLayout，可能让position: fixed元素在滚动时错位，务必实测
opacity和rgba语义完全不同，别混用
opacity: 0.5会让整个元素及其所有子节点（文字、图片、按钮）一起变淡；background-color: rgba(...)只影响背景色本身。两者机制不同，不能互相替代。
如果项目里同时写了opacity和rgba，IE9+会出现双重透明（比如本该50%透明却变成25%），而IE8根本无视rgba只认opacity——但opacity又会让文字发虚，这不是你想要的。
- 要背景半透、文字不透，只用
rgba()+ 兜底色 + IE滤镜 - 要整块区域（含文字）统一变淡，才用
opacity+filter: alpha(opacity=50) -
@supports (background-color: rgba(0,0,0,0))在IE8里不生效（它不支持@supports），无法做条件加载
PostCSS和autoprefixer已不再补全IE8 filter
像autoprefixer这类工具早在2017年就移除了对filter: alpha()和gradient的自动补全。现在依赖构建工具生成IE8兼容代码，大概率漏掉关键降级逻辑。
如果你仍需支持IE8，就得手写双份样式，并确保filter写在rgba()之后（CSS层叠顺序决定最终生效项）。SCSS mixin可以封装转换逻辑，但编译后仍是静态双写——没有捷径。
- 不要相信“兼容性一键解决”类插件，它们要么过时，要么只处理表面语法
- 动态生成ARGB字符串时，必须实时计算十六进制透明度，不能用固定映射表
- IE8下
filter不支持RGBA中单个通道透明（比如只让红色半透），这是能力边界，没法绕开
真实项目里最麻烦的往往不是写法本身，而是设计稿里那个“半透明”到底指背景、遮罩还是整个卡片——确认不清，代码写得再准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
