CSS3跨浏览器线性渐变

时间：2011-09-25 15:53:29

标签： css3 cross-browser linear-gradients css

以下代码的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);

5 个答案:

答案 0 :(得分：42)

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-用于Internet Explorer
  • 没有前缀表示完全符合规范的实现。

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

另见：

Internet Explorer

对于＆lt; 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*/
);

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

答案 1 :(得分：11)

这是一个与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%);

我从this网站偷了这个。 Microsoft已经构建了自己的生成器here。

答案 2 :(得分：4)

您是否尝试过Colorzilla's Ultimate CSS Gradient Generator？

答案 3 :(得分：2)

我得到了几乎所有东西的解决方案！

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

希望这可能对某些人有所帮助:)。

答案 4 :(得分：2)

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的标准语法has changed，例如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＆＃34; Ultimate CSS Gradient Generator＆＃34;包括MS供应商前缀-ms-linear-gradient值。
从Internet Explorer 10 Consumer Preview支持。但是当您包含标准值linear-gradient时，Internet Explorer 10 Release Preview会恰当地呈现它 因此，通过包含-ms-linear-gradient和标准方式，-ms您实际上正在解决IE10 Consumer Preview问题，该问题归结为 nobody 你的观众。

相关问题
最新问题