liner-gradient渐变兼容IE8、IE9

兼容写法:

/* Firefox 3.6+ */
 background: -moz-linear-gradient(0deg, #00a485c2 30%, #00c8a033 100%);

 /* Safari 4-5, Chrome 1-9 */
 background: -webkit-gradient(0deg, #00a485c2 30%, #00c8a033 100%);

 /* Safari 5.1+, Chrome 10+ */
 background: -webkit-linear-gradient(0deg, #00a485c2 30%, #00c8a033 100%);

 /* Opera 11.10+ */
 background: -o-linear-gradient(0deg, #00a485c2 30%, #00c8a033 100%);

 background: linear-gradient(0deg, #00a485c2 30%, #00c8a033 100%);

/*IE<9>*/
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#00a485c2,endColorstr=#00c8a033);

/*IE8+*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#00a485c2, endColorstr=#00c8a033)";

GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0 
  1:默认值。水平渐变。 
  0:垂直渐变。 

ps:

但是有时候会在IE9上出现这种情况,直接显示蓝黑渐变。这是因为在filter定义颜色时,必须使用十六进制颜色。不能简写,也不要使用rgb,带有透明度的十六进制颜色也不行(颜色会发生偏差)!

以下是相关资料的解释。

startColorStr和endColorStr并不是简单的代表颜色,它们的格式应该是 #AARRGGBB 。 AA, RR, GG, BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为#FF000000 - #FFFFFFFF 。
startColorStr默认值为 #FF0000FF 。不透明蓝色。
endColorStr默认值为 #FF000000 。不透明黑色。

由于简写不符合它们的语法,所以startColorStr和 endColorStr都取了默认值 蓝色和黑色,也就出现了上面的效果。
参考:https://blog.csdn.net/shengandshu/article/details/73920765

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值