CSS3跨浏览器线性渐变

以下代码将会是Opera和IE的替代品吗?

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

请注意 ,我testing了以下规则。 所有的浏览器都支持它们。 但他们是垂直渐变。 任何人都可以帮我修改他们水平的?

 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); 
 background-image: -ms-linear-gradient(right, #0c93C0, #FFF); background-image: -o-linear-gradient(right, #0c93C0, #FFF); 

所有的实验CSS属性都得到一个前缀:

  • -webkit-用于Webkit浏览器(Chrome,Safari)
  • -moz-用于FireFox
  • -o-为歌剧
  • -ms-用于Internet Explorer
  • 没有完全按照规范的实现的前缀

如果你想要一个不同的angular度,请使用top right而不是right 。 如果您想要水平渐变,请使用leftright

也可以看看:

  • MDN: linear-gradient

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),而IE8build议使用-ms-filter (必须引用该值)而不是filter 。 有关Microsoft.Gradient更详细的文档可以在以下urlfind: http : //msdn.microsoft.com/zh-cn/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颜色。 意思是alpha,FF表示不透明,而00表示透明。 GradientType部分是可选的,整个expression式不区分大小写。

这里有一个例子,它适用于Opera,Internet Explorer和许多其他networking浏览器。 如果浏览器不支持渐变,则会显示正常的背景色。

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

我从这个网站上偷了这个。 微软在这里build立了自己的发电机。

你有没有尝试Colorzilla的终极CSS渐变发生器 ?

我得到了几乎所有的解决scheme!

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

希望这可能会帮助一些人:)。

罗布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渐变生成器 ”,都包括MS供应商 – 前缀-ms-linear-gradient值。
它在Internet Explorer 10 Consumer Preview上支持。 但是,当您包含标准值linear-gradient , Internet Explorer 10 Release Preview会正确呈现它。
因此,通过包含-ms-linear-gradient和标准方法,使用-ms你实际上只处理了IE10 Consumer Preview,而这个预览在听众中没有任何意义