如何在 IE 11 上使用线性渐变制作背景图像？答案

【问题标题】：How to make background-image with linear-gradient work on IE 11?如何在 IE 11 上使用线性渐变制作背景图像？
【发布时间】：2013-11-27 14:33:31
【问题描述】：

知道如何让background-image 和linear-gradient 在IE 11 上工作吗？

以下代码在 IE 10 上运行良好，但在 IE 11 上无法运行。

background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);

我可以使用以下filter 使linear-gradient 在 IE 6-9、11 上工作，但在这种情况下不显示背景图像。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )

我对想法持开放态度。

更新：这是我目前拥有的代码。

background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );

【问题讨论】：

你有小提琴，或者我们可以看看的在线例子吗？ IE11 支持线性渐变无前缀 (See MSDN)。

标签： css background-image linear-gradients internet-explorer-11

【解决方案1】：

我注意到对于 IE 11，线性渐变本身可以正常工作。不幸的是，如果您还想使用免费图片，它不能很好地用作叠加层。

我能够让它为我工作的唯一方法是切换到使用 rgba 而不是十六进制颜色和百分比。此外，它仅在我将线性渐变放在首位时才有效，反之亦然。

background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('images/background.jpg');

【讨论】：

哥们你太棒了...谢谢

【解决方案2】：

linear-gradient() 在 IE10 RTM 及更高版本（包括 IE11）上支持无前缀。您永远不需要 -ms- 前缀——只有 IE10 的预发布版本需要它和 those versions don't even run anymore。在 CSS 中包含前缀只是在浪费空间。

注意linear-gradient() 的定向语法是不同的；最初的 top 现在改为 to bottom（请参阅 this blog post、this question 和 spec 了解详细信息）：

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);

【讨论】：

如果你还有那个filter，删除它。或者至少将其隐藏在条件注释后面。或者，如果您必须支持 IE9，则不能使用 CSS 渐变或 IE 过滤器 - 您将需要退回到 SVG 或最坏的情况下使用普通图像。
我按照你的建议删除了“过滤器”，但它仍然对我不起作用:(
注意：我意识到为了在 IE11 中工作，不带前缀的 linear-gradient() 必须是 CSS 规则中的第一个声明，然后是 -webkit-、-moz-、-o- 和 - ms-.
我没有看到同样的问题。如果您首先列出了过滤器，则背景图像属性似乎可以在 IE11 中以任何顺序列出（只要 w3c 版本最后列出）。我正在使用 11.0.9600.16521 进行测试，但没有发现任何重大问题。 IE11 在符合 w3 规范方面似乎比 chrome 或 firefox 更严格，因为提到的两者仍然接受顶部而不是规范的底部。只要您拥有像@BoltClock 在他们的回答中给出的属性 - 无论存在什么其他东西，它都可以工作。

【解决方案3】：

这些都是非常棒的解决方案如果您直接在文本上叠加线性渐变。但是如果你想在图像上显示它，它在 IE 中不起作用。不要问我为什么，但它不起作用。

翻了很多资源，终于找到了这个diddy

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

我将它包装在 10+ 的 IE 选择器中。您需要包含不透明度，因为这将有助于将渐变叠加层与内容混合。

希望这对某人有所帮助！

【讨论】：

【解决方案4】：

令人抓狂，不是吗？

在 IE 11 之前，

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');

对于 IE 11：

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

没错，我们不仅要担心支持旧的 IE，显然我们现在还必须处理新的 IE 怪癖......

【讨论】：

background-image:linear-gradient(to bottom, #FFFFFF,#CCCCCC); 在存在过滤器的情况下可以正常工作。此外，如果您试图以 IE9 的 SVG 支持为目标，那么在 IE 11 之前我们不必只做一个简单的过滤器。
-ms 前缀不是必需的。而是 top 使用 to bottom

【解决方案5】：

我遇到了同样的问题，除了做过滤器和线性渐变之外，我还必须在我的 CSS 类中添加 width，一旦我设置了宽度，我就可以看到我的自定义具有背景渐变的样式。

【讨论】：