CSS3跨浏览器线性渐变

Question

以下代码的 Opera 和 IE 替代品是什么？

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

注意，我已经测试了以下规则。所有浏览器都支持它们。但它们是垂直渐变。如何将它们修改为水平的？

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

Answer 1

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

所有实验性 CSS 属性都会获得一个前缀：

• -webkit- 用于 Webkit 浏览器（chrome、Safari）
• -moz- 用于 FireFox
• -o- 用于Opera
• -ms- for Internet Explorer
• 无前缀，实现完全符合规范。

如果您想要不同的角度，请使用 top right 而不是 right。如果您想要水平渐变，请使用 left 或 right。

另请参阅：

• MDN：线性渐变

Internet Explorer

对于

/*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)";

filter 适用于 IE6、IE7（和 IE8），而 IE8 推荐使用 -ms-filter（该值必须为引用）而不是过滤器。
有关 Microsoft.Gradient 的更详细文档可在以下位置找到：http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

-ms-filter 语法

由于您是 IE 的粉丝，我将解释 -ms-filter 语法：

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

除了使用 RGB HEX 颜色之外，您还可以使用ARGB 颜色格式。 A 表示 Alpha，FF 表示不透明，而 00 表示透明。 GradientType 部分是可选的，整个表达式不区分大小写。

Answer 2

这是一个适用于 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%);

我从这个网站上偷了这个。 Microsoft 在此处构建了自己的生成器。

Answer 3

Rob W 的回答很全面，同时也很冗长。因此，我想在 2014 年底提供一个支持当前浏览器的摘要，同时确保一些向后兼容性，仅忽略 IE6/7 渲染线性渐变和早期渲染的无效能力。 Webkit (Chrome1-9, Saf4-5 特殊方式(-webkit-gradient( 线性, 左上, 左下, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)

标准语法 已从开始渐变位置更改为到方向，例如background-image：线性渐变(到底部，#0C93C0， #FFF );

广泛支持、易于阅读的 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+ */

一个有趣的事实是，网络上的大多数博客文章和浏览器渐变工具，例如著名的 ColorZilla 的“< a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">终极 CSS 渐变生成器" 包含 MS 供应商前缀-ms-线性梯度值。
它从 Internet Explorer 10 Consumer Preview 开始受支持。但是，当您包含标准值线性渐变时， Internet Explorer 10 Release Preview 可以正确呈现它。
因此，通过包含 -ms-linear-gradient 和标准方式，以及 -ms，您实际上只是解决了 IE10 Consumer Preview 问题，这可以归结为 您的听众中没有人。

Answer 4

我几乎找到了所有问题的解决方案！

/* 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;