CSS 如何将 -webkit-gradient 应用到 IE？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10165412/
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 apply -webkit-gradient to IE?
提问by Kenci
I have the following css code:
我有以下 css 代码：
-webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));
Which displays the background very nicely in Chrome. Internet explorer just displays a white background. I tried applying CSS 3 pie, which didnt change anything.
它在 Chrome 中很好地显示了背景。Internet Explorer 仅显示白色背景。我尝试应用 CSS 3 pie，它没有改变任何东西。
Following is my css:
以下是我的css：
body {
behavior: url(css3pie/PIE.htc);
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
/*background:url("../image/bg.png") repeat scroll 0 0 transparent;*/
background: -webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));
}
Thanks
谢谢
回答by 0b10011
-webkit-gradient()is for webkit browsers only(Safari, Chrome, etc). This means it will not work in Firefox, Internet Explorer, Opera, or any other browser that does not support -webkit-gradient().
-webkit-gradient()仅适用于webkit 浏览器（Safari、Chrome 等）。这意味着它不能在 Firefox、Internet Explorer、Opera 或任何其他不支持-webkit-gradient().
If you want to get gradient in all modern browsers, try the following code:
如果您想在所有现代浏览器中获得渐变，请尝试以下代码：
Generated at http://projects.korrelboom.com/gradient-generator/:
在http://projects.korrelboom.com/gradient-generator/生成：
/* SVG fallback(Opera 11.10-, IE9) */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsNTEsMTAyLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoODUsMTcwLDIzOCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));
/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,51,102,1)), color-stop(1, rgba(85,170,238,1)));
/* Newer Browsers */
background: linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));
/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE)"
Note:You don't need any external JavaScript library to get gradients in IE. Simply use the CSSfrom above ;) However, for your own sanity, I would suggest using a preprocessor such as LESS or SASS so you can have all of the browser-specific versions automatically generated.
注意：您不需要任何外部 JavaScript 库来在 IE 中获取渐变。只需使用上面的CSS;) 但是，为了您自己的理智，我建议您使用预处理器，例如 LESS 或 SASS，以便您可以自动生成所有特定于浏览器的版本。
回答by Jon
The CSS3 PIE documentationhas this example for linear gradients:
CSS3 PIE文档中有这个线性渐变示例：
#myElement {
background: #CCC; /*fallback for non-CSS3 browsers*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
You are missing the -pie-backgroundproperty.
你缺少-pie-background财产。
As an aside, you should use the "new webkit" syntax instead of the one you currently have; it's been quite a while since Webkit abandoned it.
顺便说一句，您应该使用“新的 webkit”语法而不是您目前拥有的语法；Webkit 放弃它已经有一段时间了。
回答by Atoz Webhelp
For IE8 you can add this
对于 IE8 你可以添加这个
background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#aaaaaa',GradientType=1);
For IE9 the following will work
对于 IE9，以下将起作用
background-image: -ms-linear-gradient(left, #111, #aaa);
回答by HATCHA
Use this tool for generate your Css style
http://www.colorzilla.com/gradient-editor/
click Import from css
使用此工具生成您的 Css 样式
http://www.colorzilla.com/gradient-editor/
点击Import from css
background: rgb(85,170,238); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1YWFlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDMzNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(85,170,238,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,170,238,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aaee', endColorstr='#003366',GradientType=0 ); /* IE6-8 */
