37

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

5 回答 5

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

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

  • -webkit-用于 Webkit 浏览器（chrome、Safari）
  • -moz-火狐
  • -o-歌剧
  • -ms-对于 Internet Explorer
  • 完全符合规范的实现没有前缀。

如果您想要不同的角度，请使用top right代替。right使用leftorright如果你想要一个水平渐变。

也可以看看：

IE浏览器

对于 <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部分是可选的，整个表达式不区分大小写。

于 2011-09-25T15:55:33.017 回答
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%);

我从这个网站上偷了这个。微软在这里建立了自己的生成器。

于 2011-09-25T15:58:25.750 回答
4

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

一个有趣的附带事实是，网络上的大多数博客文章和浏览器渐变工具，例如著名的 ColorZilla 的“ Ultimate CSS Gradient Generator ”都包含 MS 供应商前缀-ms-linear-gradient值。
从 Internet Explorer 10 Consumer Preview 开始支持它。但是，当您包含标准值时linear-gradient，Internet Explorer 10 Release Preview会适当地呈现它。
因此，通过包含-ms-linear-gradient和标准的方式，-ms您实际上只是在解决 IE10 消费者预览版，这归结为您的听众中没有人。

于 2014-10-27T21:59:14.580 回答
3

你试过Colorzilla 的 Ultimate CSS Gradient Generator吗？

于 2011-09-25T16:17:19.147 回答
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;

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

于 2013-04-15T10:46:50.163 回答