我有一个div，在其中更改背景（使用jQuery）。这些CSS3规则允许新的背景图片很好地淡入淡出
transition: background-image 1s ease-in-out;
background: center center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
问题是背景尺寸也在变化。
因此，例如，如果从肖像切换为风景背景图像，则在淡入淡出时，图像会被垂直压缩，然后水平拉伸。这可能有点令人作呕。
background-size: cover除了仅淡化背景图像本身的背景色而没有背景尺寸之外，还有什么方法可以使用？
那只是...很奇怪。background-image首先不应该是可动画的。在另一方面，background-size 可以是动画，但它是从你的CSS很清楚，你不想要的过渡background-size。但是，您的浏览器仍然选择将其与图像一起进行动画处理。
无论您的浏览器在做什么，它显然都在忽略规范，只是在做自己的事情。由于background-image无法使用CSS制作动画（我知道Firefox和IE不支持它），并且您的后台转换已经通过jQuery处理过，因此我建议使用jQuery而不是CSS来实现交叉淡入淡出功能，以确保它能够始终如一地工作跨浏览器。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句