IE 8及更早不支持rgba/hsla，需用filter: alpha(opacity=XX)兜底（值0–100），或改用半透PNG；文字透明禁用filter，应降级为浅色；filter可能引发z-index等连锁问题，建议条件注释隔离样式。
IE 8 及更早版本不支持 rgba() 和 hsla()，直接写透明色会导致背景/文字“消失”或回退为纯黑/纯白——这不是 bug，是渲染引擎根本没实现这个语法。
用 filter: alpha(opacity=XX) 强制 IE 支持透明度
这是 IE 专有滤镜，仅在 IE 5.5–IE 8 生效（IE 9+ 已废弃但部分兼容模式下仍可触发）：
.box {
background-color: #000;
/* 标准写法 */
background-color: rgba(0, 0, 0, 0.6);
/* IE 8 及以下兜底 */
filter: alpha(opacity=60);
/* 注意：alpha 的值是 0–100，不是 0–1 */
}关键点：
-
filter必须写在rgba后面，否则 IE 会覆盖标准样式 - 该滤镜会影响整个元素（包括子内容），不能只作用于背景
- 若同时设置
opacity，IE 会忽略filter，需避免混用
IE 不支持 rgba() 背景时，改用半透 PNG 图片
当 filter 不适用（比如需要精确控制某一层背景，又不想影响文字），最稳的方案是切一张 1px × 1px 的 PNG：
立即学习“前端免费学习笔记（深入）”；
- 用 Photoshop 或在线工具生成 60% 透明的黑色 PNG，保存为
bg-60.png - CSS 中用
background-image替代background-color - IE 6+ 完全支持 PNG 透明通道（IE 6 需额外处理 alpha 通道，但现代构建工具如 Autoprefixer + postcss-pngfix 会自动补丁）
.header {
/* IE 安全写法 */
background-color: #000;
background-image: url('bg-60.png');
/* 标准浏览器优先使用 rgba，覆盖掉图片 */
background-color: rgba(0, 0, 0, 0.6);
background-image: none;
}透明文字在 IE 中发虚？别用 filter 处理文字
对 <p></p> 或 <span></span> 单独加 filter: alpha() 会导致字体渲染异常（锯齿、模糊、甚至不可读）：
- 文字透明应统一用
opacity，IE 9+ 支持；IE 8– 无真正解决方案 - 若必须兼容 IE 8，改用浅色文字（如
#999）替代rgba(0,0,0,0.6)，视觉接近且无渲染问题 - 绝对不要给
font-color加filter——它不作用于文字颜色，只作用于整个元素盒模型
真正麻烦的不是写法，而是 IE 里 filter 和 z-index、position、hasLayout 的连锁反应——一个 filter 可能让父容器突然“吃掉”子元素的点击事件，或者让 fixed 定位失效。这种时候，与其硬调，不如用条件注释加载独立 IE 样式表，把透明逻辑彻底隔离。
