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

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 但只对背景图像本身进行淡入淡出的过渡而不改变背景大小？

- andrewtweber

Answer 1

我通过以下方式解决了不想要的大小动画：

1. 使用两个div，它们被绝对定位在彼此上方

2. 循环它们的透明度（例如将一个透明度设置为0，另一个透明度设置为1）

3. 把CSS过渡效果放在透明度上而不是背景图片上。

这实现了div背景图像之间的交叉淡入淡出效果。如果您有多于两张要循环显示的图片，则可以使用更多的div或更改透明度为1的div的背景图片。

- Jon N

Answer 2

那很奇怪。 background-image 本来就不应该具有动画效果。 另一方面，background-size 可以 被动画化, 但是从你的CSS中非常清楚，你 不想 过渡 background-size。然而，你的浏览器仍会与图像一起动画化它。

无论你的浏览器做了什么，显然它忽略了规范，只是在做自己的事情。由于使用CSS不能使background-image 具有动画效果（我知道Firefox和IE不支持它），并且你的背景过渡已经被jQuery处理，因此我建议使用jQuery而不是CSS来实现交叉淡入淡出，以确保它在各种浏览器中都能正常工作。

- BoltClock

---

它是在Windows上的Chrome 36.0.1985。只有我还是Chrome正在做IE曾经做过的事情（引入不兼容的怪癖，只有他们的浏览器支持），但这一次却逃脱了惩罚？ - andrewtweber

@andrewtweber: 不只是你。 ;) - BoltClock

现在在2021年，Firefox支持动画化background-image，并且不像Chrome一样在交叉淡入淡出期间遭受图像拉伸的问题。 - Corey