大小封面淡入淡出转换没有大小过渡
我有一个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但只有淡出过渡背景图像本身没有背景大小？
这很奇怪。 background-image首先不应该是动画的。 另一方面， background-size可以是动画效果，但从CSS清晰可见，您不想过渡background-size 。 然而，您的浏览器选择随着图像一起进行动画处理。
无论您的浏览器在做什么，它显然都忽略了规范，只是做自己的事情。 由于使用CSS（我知道Firefox和IE不支持它） background-image不是可以动画的，并且你的背景过渡已经被jQuery处理了，所以我建议使用jQuery而不是CSS来实现交叉渐变以确保它'将在不同的浏览器上保持一致。
我通过以下方式解决了意想不到的大小动画：
有两个div，绝对位于彼此之上
循环他们的不透明度（例如一个为0，另一个为1）
将css转换放在不透明度上，而不是背景图像上。
这实现了divs的背景图像之间的交叉淡入淡出。 如果您有两个以上的图像要循环，请使用更多的div，或将您将不透明度设置为1的背景图像更改为1。
链接地址: http://www.djcxy.com/p/23791.html