background-size 封面淡入淡出过渡，没有尺寸过渡答案

【问题标题】：background-size cover fade transition without size transitionbackground-size 封面淡入淡出过渡，没有尺寸过渡
【发布时间】：2014-08-19 06:07:17
【问题描述】：

我有一个要更改背景的 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，但只对背景图像本身进行淡入淡出过渡而没有背景大小？

【问题讨论】：

标签： css background-image css-transitions background-size

【解决方案1】：

我通过以下方式解决了意外大小的动画：

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

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

【讨论】：

【解决方案2】：

这只是……很奇怪。 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 来实现交叉淡入淡出以确保它'将在不同浏览器中始终如一地工作。

【讨论】：

它在 Windows 上的 Chrome 36.0.1985 上。只是我还是 Chrome 正在做 IE 所做的事情（引入了只有他们的浏览器支持的不兼容的怪癖）但这次侥幸逃脱？
@andrewtweber: Not just you. ;)
现在在 2021 年，Firefox 支持动画 background-image，并且不会像 Chrome 那样在交叉淡入淡出期间受到图像拉伸的影响。