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

如果你想要一个不同的角度,请使用top right而不是right.使用left或者right如果需要水平渐变.

也可以看看:

• 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),而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部分是可选的,整个表达式不区分大小写.

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

我从这个网站偷了这个.微软在这里建立了自己的发电机.