背景尺寸覆盖淡入淡出过渡，无尺寸过渡

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首先就不应该是可动画的。另一方面，background-size 可以进行动画处理，但从 CSS 中可以清楚地看出您不想进行过渡background-size。然而，您的浏览器无论如何都会选择将其与图像一起设置动画。

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