從背景淡入到另一個背景

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') 。