背景大小覆盖渐变过渡没有大小过渡

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

我通过:

1. 有两个div，绝对位于彼此的顶部

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

3. 将css过渡放在不透明度上，而不是background-image。

这实现了div背景图像之间的交叉渐变。如果你有两个以上的图像循环，要么使用更多的div，或者改变背景图像，你正在设置不透明度为1。

Answer 2

这只是…奇怪。首先，background-image不应该是可动画的。另一方面，background-size 可以动画，但从你的CSS中可以很清楚地看出，你不想要过渡background-size。然而，你的浏览器还是选择让它和图片一起动起来。

无论你的浏览器在做什么，它显然忽略了规范，只是做自己的事情。由于background-image不能使用CSS动画化(我知道Firefox和IE不支持它)，并且你的背景过渡已经用jQuery处理了，我建议使用jQuery代替CSS来实现交叉渐变，以确保它在浏览器之间一致地工作。