CSS 如何在 IE 11 上使用线性渐变制作背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19980079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make background-image with linear-gradient work on IE 11?
提问by Vadim
Any idea how I can make background-imagewith linear-gradientto work on IE 11?
任何想法，我怎么能做出background-image与linear-gradient工作在IE 11？
The following code works fine on IE 10 but doesn't work on IE 11.
以下代码在 IE 10 上运行良好，但在 IE 11 上不起作用。
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
I can make linear-gradientto work on IE 6-9, 11 using the following filterbut background image is not displayed in this case.
我可以linear-gradient使用以下方法在 IE 6-9、11 上工作，filter但在这种情况下不显示背景图像。
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )
I'm open to an ideas.
我对一个想法持开放态度。
Update:Here's the code I currently have.
更新：这是我目前拥有的代码。
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 );
回答by BoltClock
linear-gradient()is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms-prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.
linear-gradient()支持不带前缀的 IE10 RTM 及更高版本，包括 IE11。您永远不需要-ms-前缀 — 只有 IE10 的预发布版本需要它，而那些版本甚至不再运行。在 CSS 中包含前缀只是在浪费空间。
Note that the directional syntax for linear-gradient()is different; what was originally topis now represented as to bottominstead (see this blog post, this question, and the specfor details):
请注意， for 的方向语法linear-gradient()是不同的；最初的top内容现在表示为to bottom（请参阅此博客文章、此问题和规范以了解详细信息）：
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
回答by Hank
Maddening, isn't it?
令人抓狂，不是吗？
Prior to IE 11,
在 IE 11 之前，
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');
For IE 11:
对于 IE 11：
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
That's right folks, we not only have to worry about supporting older IEs, apparently we'll now have to deal with NEWER IE quirks as well...
没错，我们不仅要担心支持旧的 IE，显然我们现在还必须处理较新的 IE 怪癖......
回答by shaneonabike
These are all super great solutions ifyou are overlaying a linear gradient directly on text. But if you want to display it overtop an image it doesn't work in IE.. don't ask me why but it doesn't.
如果您直接在文本上叠加线性渐变，这些都是非常好的解决方案。但是，如果您想将其显示在图像之上，则它在 IE 中不起作用。不要问我为什么，但它不起作用。
I scowered many resources and finally came across this 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;
}
}
I wrapped this within an IE selector for 10+. You need to include the opacity as that will help blend the gradient overlay with the content.
我将它包装在 10+ 的 IE 选择器中。您需要包含不透明度，因为这将有助于将渐变叠加与内容混合。
Hope this helps someone!
希望这可以帮助某人！
回答by Swetha Sankaran
I faced the same issue and in addition to doing the filter and linear-gradient, I also had to add the widthin my CSS class, once I set the width, I could see my custom styles with background gradient.
我遇到了同样的问题，除了做过滤器和线性渐变之外，我还必须在我的 CSS 类中添加宽度，一旦我设置了宽度，我就可以看到带有背景渐变的自定义样式。
