CSS CSS3 跨浏览器线性渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7546638/
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
CSS3 cross browser linear gradient
提问by Tural Ali
What will be Opera and IE alternatives of following code?
以下代码的 Opera 和 IE 替代品是什么？
background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);
Note, I've tested following rules. All browsers supports them. But they are vertical gradients. Can anyone help me to modify them to horizontal ones?
请注意，我已经测试了以下规则。所有浏览器都支持它们。但它们是垂直梯度。谁能帮我把它们改成水平的？
background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image: -moz-linear-gradient(top, #0C93C0, #FFF);
background-image: -ms-linear-gradient(top, #0C93C0, #FFF);
background-image: -o-linear-gradient(top, #0C93C0, #FFF);
background-image: linear-gradient(top, #0C93C0, #FFF);
回答by Rob W
background-image: -ms-linear-gradient(right, #0c93C0, #FFF);
background-image: -o-linear-gradient(right, #0c93C0, #FFF);
All experimental CSS properties are getting a prefix:
所有实验性 CSS 属性都获得一个前缀：
-webkit-for Webkit browsers (chrome, Safari)-moz-for FireFox-o-for Opera-ms-for Internet Explorer- no prefixfor an implementation which is in full accordance with the specification.
-webkit-用于 Webkit 浏览器（chrome、Safari）-moz-火狐版-o-歌剧-ms-用于 Internet Explorer- 完全符合规范的实现没有前缀。
Use top rightinstead of right, if you want a different angle. Use leftor rightif you want a horizontal gradient.
如果您想要不同的角度，请使用top right代替right。如果您想要水平渐变，请使用left或right。
See also:
也可以看看：
- MDN:
linear-gradient
- MDN：
linear-gradient
Internet Explorer
IE浏览器
For <IE10, you will have to use:
对于 <IE10，您必须使用：
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filterworks for IE6, IE7 (and IE8), while IE8 recommends the -ms-filter(the value has to be quoted) instead of filter.
A more detailled documentation for Microsoft.Gradientcan be found at: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
filter适用于 IE6、IE7（和 IE8），而 IE8 建议使用-ms-filter（必须引用该值）而不是filter. Microsoft.Gradient可以在以下位置找到更详细的文档：http: //msdn.microsoft.com/en-us/library/ms532997(v=vs.85) .aspx
-ms-filtersyntax
-ms-filter句法
Since you're a fan of IE, I will explain the -ms-filtersyntax:
由于您是 IE 的粉丝，我将解释-ms-filter语法：
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
startColorStr='#0c93c0', /*Start color*/
endColorStr='#FFFFFF', /*End color*/
GradientType=0 /*0=Vertical, 1=Horizontal gradient*/
);
Instead of using a RGB HEX color, you can also use a ARGB color format. A means alpha, FF means opaque, while 00means transparent. The GradientTypepart is optional, the whole expression is case-insensitive.
除了使用 RGB HEX 颜色，您还可以使用 ARGB 颜色格式。A 表示 alpha，FF 表示不透明，而00表示透明。该GradientType部分是可选的，整个表达式不区分大小写。
回答by Robin
Here an example, which works with Opera, Internet Explorer and many other web browsers. If a browser does not support gradients, it will show a normal background color.
这是一个示例，它适用于 Opera、Internet Explorer 和许多其他 Web 浏览器。如果浏览器不支持渐变，它将显示正常的背景颜色。
background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
I've stolen this from thiswebsite. Microsoft has built their own generator here.
回答by user123444555621
Have you tried Colorzilla's Ultimate CSS Gradient Generator?
回答by Volker E.
Rob W's answer is comprehensive, at the same time verbose. Therefore I'd like to go for a summary supporting current browsers end of 2014, while ensuring somebackwards-compatibility at the same time, leaving out just IE6/7's invalid capability of rendering a linear gradient and early Webkit (Chrome1-9, Saf4-5 special way (-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)
Rob W 的回答很全面，同时也很冗长。因此，我想总结一下 2014 年底支持当前浏览器的情况，同时确保一些向后兼容性，只忽略 IE6/7 渲染线性渐变和早期 Webkit（Chrome1-9、Saf4 -5 特殊方式 ( -webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)
Standards syntax has changedfrom beginning gradient position to to direction, e.g. background-image: linear-gradient( to bottom, #0C93C0, #FFF );
标准语法已从开始渐变位置更改为to direction，例如background-image: linear-gradient( to bottom, #0C93C0, #FFF );
Widely-supported, easy-to-read CSS:
得到广泛支持、易于阅读的 CSS：
background-color: #8BCCE1; /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */
background-image: -webkit-linear-gradient( top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image: -moz-linear-gradient( top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image: -o-linear-gradient( top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image: linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */
An interesting side fact is, that most blog posts and browser gradient tools on the web, like f.e. famous ColorZilla's "Ultimate CSS Gradient Generator" include the MS vendor-prefixed -ms-linear-gradientvalue.
It's supported from Internet Explorer 10 Consumer Preview on. But when you're including standards value linear-gradient, Internet Explorer 10 Release Previewrenders it appropriately.
So by including -ms-linear-gradientand standards way, with -msyou're actually addressing just IE10 Consumer Preview, which comes down to nobodyin your audience.
一个有趣的附带事实是，网络上的大多数博客文章和浏览器渐变工具，例如著名的 ColorZilla 的“终极 CSS 渐变生成器”，都包含 MS 供应商前缀-ms-linear-gradient值。
它从 Internet Explorer 10 Consumer Preview 开始受支持。但是当您包含标准值时linear-gradient，Internet Explorer 10 Release Preview会适当地呈现它。
因此，通过包含-ms-linear-gradient和标准的方式，-ms您实际上只是在解决 IE10 Consumer Preview，这归结为您的受众中没有人。
回答by Ger989
i got the solution for almost everything!
我得到了几乎所有问题的解决方案！
/* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #000000, #FFFFFF);
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #000000, #FFFFFF);
/* IE 7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0);
/* IE 8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)";
/* IE 10+ */ background-image: -ms-linear-gradient(top, #000000, #FFFFFF);
/* Opera 11.10+ */ background-image: -o-linear-gradient(top, #000000, #FFFFFF);
/* fallback image background-image: url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */ background-color: #000000;
Hope this might help some people :).
希望这可以帮助一些人:)。
