Question

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

以下代码在IE 10上运行正常，但在IE 11上不起作用。

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

我可以使用以下linear-gradient使filter使用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 );

Answer 1

IE10 RTM及更高版本（包括IE11）支持

linear-gradient()。您永远不需要-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);

Answer 2

疯了，不是吗？

在IE 11之前，

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

对于IE 11：

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

这是对的人，我们不仅要担心支持旧的IE，显然我们现在还要处理NEWER IE怪癖......

Answer 3

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

我开辟了许多资源，最后遇到了这个diddy

{{1}}

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

希望这有助于某人！

Answer 4

我注意到对于 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');

Answer 5

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

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

5 个答案: