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

Question

知道如何使用 linear-gradient 使 background-image 在 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 );

Answer 1

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