从背景淡入到另一个背景

Question

假设我的元素有 background-image:background1.png。

如何使元素的背景淡入 background2.png 而不会淡出第一个。

Answer 1

只是 position 第二个元素（带有 background2.png）就在第一个元素的顶部。 并淡入第二个元素。

Answer 2

基本上你可以用 JQuery 自动化它：

  $('.oldclass').prepend('<div class="newclass"></div>');
  $('.newclass').fadeIn('slow');

工作演示： http://jsfiddle.net/AlienWebguy/GKUnF/

Answer 3

我找到了一个不错的 url ，其中清楚地解释了如何做到这一点：

http://snook.ca/archives/javascript/jquery-bg-image-animations

但它需要创建一个包含两者的图像，使用 CSS Sprites 来实现这个......

Answer 4

确实，没有一种简单或优雅的方法可以做到这一点。 CSS 动画依赖于这样一个事实，即不透明度之类的东西具有中间值（即它们是连续的）。

最好的解决方案可能是必须将 div 与它们各自的背景分开，将它们放在彼此的顶部。 然后默认隐藏第二个，当你想改变它的背景时调用fadeIn('slow') 。