20

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

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

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

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

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 );
4

5 回答 5

22

linear-gradient()在 IE10 RTM 及更高版本（包括 IE11）上支持无前缀。你永远不需要-ms-前缀——只有 IE10 的预发布版本需要它，而那些版本甚至不再运行了。在 CSS 中包含前缀只是在浪费空间。

请注意，方向语法linear-gradient()是不同的；原来top的内容现在to bottom改为（请参阅此博客文章、此问题和规范了解详细信息）：

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
于 2013-11-14T14:22:15.180 回答
11

令人抓狂，不是吗？

在 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 怪癖......

于 2013-12-26T16:04:00.557 回答
3

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

找了很多资源，终于遇到了这个老爹

@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 选择器中。您需要包括不透明度，因为这将有助于将渐变叠加层与内容混合。

希望这对某人有帮助！

于 2016-09-25T22:50:31.667 回答
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');
于 2021-03-23T14:28:16.767 回答
0

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

于 2015-02-24T19:38:20.840 回答