IE6–IE8不支持rgba()，需用filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)模拟背景半透明，其中前两位十六进制（如7F）表示不透明度，后六位为RGB颜色值，且startColorstr与endColorstr必须一致以避免渐变带；同时须通过@media \0screen\,screen\9隔离滤镜仅作用于IE6–IE8，防止与rgba叠加导致过暗，并注意filter会强制继承影响子元素渲染。
IE6–IE8不支持rgba()，必须用filter渐变模拟
IE6–IE8压根不认识rgba()，写了等于白写。想让背景色半透明，得用filter: progid:DXImageTransform.Microsoft.gradient伪造——它本质是靠十六进制颜色值的前两位控制透明度，比如#7F000000中7F对应约50%不透明度（00=全透，FF=全不透），后六位才是颜色。
常见错误是直接抄rgba(0,0,0,0.5)降级成filter: alpha(opacity=50)，这只能让整个元素变灰，背景色本身还是实色，达不到“仅背景透明、内容不透明”的目标。
-
startColorstr和endColorstr必须一致，否则会出渐变带 - 不能写成
background: #000; filter: ...双声明，IE8会优先渲染纯黑背景，盖掉滤镜效果 - IE6–IE7需触发hasLayout，加
*zoom: 1或*overflow: hidden，否则滤镜不生效
IE9重复应用filter导致背景过暗，要用@media hack隔离
IE9同时识别rgba()和filter，若两者共存，会叠加计算透明度：比如rgba(0,0,0,0.5) + filter: alpha(opacity=50) ≈ 25%不透明，背景发黑严重。
解决方案是用IE专属媒体查询把filter锁死在IE6–IE8：
立即学习“前端免费学习笔记（深入）”；
background-color: rgba(0, 0, 0, 0.5);
@media \0screen\,screen\9 {
background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
}
注意：<p>注意：<code>\0screen\,screen\9只被IE6–IE9识别，IE10+和现代浏览器完全忽略，不会污染样式流。
文字发灰不是bug，是filter强制继承的渲染机制
给父容器加filter后，子元素文字、边框、图标全变淡——这不是CSS写错了，是IE6–IE8的固有行为：alpha滤镜会无差别混合整棵DOM树的像素，子元素无法通过opacity: 1或filter: none逃逸。
真正有效的解法只有两个：
- 重构DOM，把背景抽成独立
<div>层，用position: absolute叠在内容下方（内容层保持z-index更高） - 不改结构时，给关键子元素（如按钮、输入框）硬加强对比背景色，例如
background-color: #fff或#f0f0f0，靠纯色抵消灰度感
别试zoom: 1、position: relative或filter: alpha(opacity=100)，这些在IE6–IE8里全部无效。
透明遮罩层禁用交互，但不能挡键盘焦点
如果用透明背景做模态框遮罩（overlay），在IE9以下必须避免用pointer-events: none——它根本不存在。正确做法是加一层position: fixed的空<div>，背景设为transparent，再配aria-hidden="true"。
关键细节：
- 遮罩
background只能用transparent，不能用rgba(0,0,0,0)（IE8不认） - 遮罩上绝不能加
tabindex="-1"，否则Tab键会卡在空层上，跳不过去 - 被遮盖的可聚焦元素（如
<button>）必须同步设disabled或tabindex="-1"+aria-disabled="true"，否则键盘用户仍能操作但视觉不可见
最易忽略的一点：滚动时遮罩位置会偏移，必须监听scroll事件手动重置top/left，或者改用position: fixed + transform: translateZ(0)（IE10+才有效）。
