IE11下线性渐变背景叠加背景图的跨浏览器兼容方案求助

你的问题主要出在IE11对CSS3特性的支持局限性上：

• IE11不支持把线性渐变和背景图放在同一个background-image里用逗号分隔的多重背景写法
• 它也识别不了#ffffff00这种十六进制透明色，必须用标准的rgba()格式
• 虽然IE11勉强支持linear-gradient，但和背景图叠加时的表现和现代浏览器不一致

下面给你两个实用的兼容方案，都能满足内联样式的需求：

方案1：嵌套div分层叠加（最稳妥） #

把背景图和渐变分别放在两个嵌套的div里，通过绝对定位实现叠加，IE11能完美识别这种写法：

<div id="the_big_picture" class="row section second_section" style="position: relative; background-image: url('img/the_big_picture_bg.jpg');">
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(255,255,255,0.98) 90%);"></div>
</div>

说明： #

• 外层div设置position: relative作为定位容器，同时加载背景图
• 内层div用绝对定位占满整个容器，专门放置渐变背景，这样渐变就会叠加在背景图上方
• 把原来的#ffffff00改成rgba(255,255,255,0)，#fffffffc改成rgba(255,255,255,0.98)，确保IE11能识别透明值

方案2：IE11专属滤镜（单div实现） #

如果不想增加嵌套结构，可以针对IE11使用它特有的渐变滤镜，同时保留现代浏览器的标准写法：

<div id="the_big_picture" class="row section second_section" style="
  /* 现代浏览器正常使用的多重背景 */
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(255,255,255,0.98) 90%), url('img/the_big_picture_bg.jpg');
  /* IE11专属滤镜：颜色格式为#AARRGGBB，AA是透明度（00全透，FF不透明） */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#FCFFFFFF', GradientType=0);
  background-color: transparent;
">
</div>

说明： #

• 滤镜里的startColorstr='#00FFFFFF'对应rgba(255,255,255,0)，endColorstr='#FCFFFFFF'对应rgba(255,255,255,0.98)（0.98*255≈250，十六进制为FC）
• 现代浏览器会忽略filter属性，直接使用标准的background-image；IE11则会应用滤镜，叠加在背景图上

如果担心滤镜和标准写法冲突，也可以用IE11专属媒体查询单独设置样式（需要配合style标签）：

<style>
/* 仅针对IE11的媒体查询 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #the_big_picture {
    background-image: url('img/the_big_picture_bg.jpg') !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#FCFFFFFF', GradientType=0);
  }
}
</style>
<div id="the_big_picture" class="row section second_section" style="
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(255,255,255,0.98) 90%), url('img/the_big_picture_bg.jpg');
">
</div>

个人更推荐方案1，它不需要处理滤镜的颜色转换问题，逻辑更清晰，兼容性也更可靠。

内容的提问来源于stack exchange，提问作者jonhendrix