为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3跨浏览器线性渐变

/ 猿问

CSS3跨浏览器线性渐变

SMILET 2019-11-14 09:30:46

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


查看完整描述

3 回答

?
潇湘沐

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

完全不符合规范的实现没有前缀。

如果要改变角度,请使用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/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*/

);

除了使用RGB HEX颜色之外,还可以使用ARGB颜色格式。表示alpha,FF表示不透明,而00表示透明。该GradientType部分是可选的,整个表达式不区分大小写。


查看完整回答
反对 回复 2019-11-14
?
慕桂英3389331

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

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


查看完整回答
反对 回复 2019-11-14
?
四季花海

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消费者预览版开始支持。但是,当您包括标准值时linear-gradient,Internet Explorer 10 Release Preview会适当地呈现它。

因此,通过包含-ms-linear-gradient和使用标准方式,-ms您实际上可以解决IE10 Consumer Preview,这归结于您的受众中没有人。


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信