什么是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,#FFF); background-image: -moz-linear-gradient(top,#FFF); background-image: -ms-linear-gradient(top,#FFF); background-image: -o-linear-gradient(top,#FFF); background-image: linear-gradient(top,#FFF);
解决方法
background-image: -ms-linear-gradient(right,#0c93C0,#FFF); background-image: -o-linear-gradient(right,#FFF);
所有实验的CSS属性都有一个前缀:
> -webkit- for Webkit浏览器(chrome,Safari)
> -moz- for FireFox
> -o- for Opera
> -ms-用于Internet Explorer
>没有完全符合规范的实现的前缀。
使用右上角而不是右边,如果你想要一个不同的角度。如果需要水平渐变,请使用左或右。
也可以看看:
> 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',GradientType=0)";
过滤器适用于IE6,IE7(和IE8),而IE8推荐使用-ms-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表示α,FF表示不透明,而00表示透明。 GradientType部分是可选的,整个表达式不区分大小写。