background-size在ios下失效?

最近天天被动画和音频折磨~个人比较喜欢用css,所以需求中碰到广告牌闪烁的需求,果断使用了css3的动画,代码如下:

#ad {
	animation: changeAd 1s infinite;
}
@keyframes changeAd {
	from {
		background: ad1.png no-repeat center center;
		background-size: 100% auto;
	}
	to {
		background: ad2.png no-repeat center center;
		background-size: 100% auto;
	}
}

在浏览器测试后,一切ok,然后用ios真机测试,居然发现图片没有正常显示,经过查找,发现是background-size在ios下没有生效。网上翻找各种资料,都说是ios兼容问题。那一定要用css3写要怎么办呢?于是就开始了各种尝试,最终测试得出,只要background-size不写在@keyframes的动画中就可以了,具体代码如下:

#ad {
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	animation: changeAd 1s infinite;
}
@keyframes changeAd {
	from {
		background-image: ad1.png;
	}
	to {
		background-image: ad2.png;
	}
}

那这样是不是说明,background-size在ios其实不存在兼容问题的,那为什么第一种写法background-size就不生效了?具体是什么原因导致@keyframes中background-size在ios失效还没有找到原因。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值