Question

我有一个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但只能淡化过渡背景图片本身而没有背景尺寸？

Answer 1

那只是......很奇怪。 background-image isn't supposed to be animatable in the first place.另一方面，background-size can be animated，但您可以从CSS中清楚地知道，您 想要转换background-size。然而，无论如何，您的浏览器会选择将其与图像一起设置动画。

无论您的浏览器在做什么，它显然都忽略了规范，只是做了自己的事情。由于background-image不能使用CSS制作动画（我知道Firefox和IE不支持它），无论如何你的背景转换已经用jQuery处理了，我建议使用jQuery而不是CSS来实现交叉淡入淡出以确保它能够跨浏览器一致地工作。

Answer 2

我通过以下方式解决了非预期的大小动画：

有两个div，绝对位于彼此之上
循环不透明度（例如一个为0，另一个为1）
将css过渡放在不透明度上，而不是背景图像上。

这实现了div的背景图像之间的交叉淡入淡出。如果要循环的图像超过2个，请使用更多div，或将将不透明度设置为1的背景图像更改为。

背景大小覆盖淡入淡出过渡而没有大小过渡

2 个答案: