4

我有一个要更改背景的 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，但只在没有背景大小的情况下淡化背景图像本身？

4

2 回答 2

2

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

  1. 有两个 div，绝对位于彼此之上

  2. 循环它们的不透明度（例如，1 到 0，另一个到 1）

  3. 将 css 过渡放在不透明度上，而不是背景图像上。

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

于 2017-09-08T13:08:32.263 回答
1

那只是……很奇怪。background-image首先不应该是动画的。另一方面，background-size 可以是动画的，但是从你的 CSS 中很清楚你不想过渡background-size。然而，您的浏览器无论如何都会选择将其与图像一起设置动画。

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

于 2014-08-19T06:20:07.243 回答