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- for FireFox
• -o- for Opera
• -ms- for ie
• 没有前缀用于完全符合规范的实现。

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

参见:

• mdn: linear-gradient

Internet Explorer

对于<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)";

filter适用于IE6, IE7(和IE8)，而IE8建议使用-ms-filter(必须引用值)而不是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%);

我从这个网站偷来的。

Answer 3

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

标准语法从开始渐变位置更改为to direction，例如background-image: linear-gradient( to bottom, #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+ */

一个有趣的事实是，大多数博客文章和浏览器的渐变工具在网络上，像f.e.著名的ColorZilla的"终极CSS渐变生成器"包括MS供应商前缀的-ms-linear-gradient值。
从Internet Explorer 10消费者预览版开始支持。但是，当您包含标准值linear-gradient时，Internet Explorer 10发布预览会适当地呈现它。
因此，通过包括-ms-linear-gradient和标准方式，-ms实际上只是解决IE10消费者预览，这归结为nobody在你的观众。

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;