淡入淡出背景圖像

我有一個工作代碼，當我的導航欄中的鏈接被點擊時，改變我的文檔背景圖像。背景圖片立即變化，沒有動畫。我怎麼能做出新的背景圖片fadeIn（）; ？淡入淡出背景圖像

$('.navigation a').click(function() { 
    currentBg = $(this).attr('href').replace('#', '') +'.jpg'; 
    $('.background').css({'background-image':'url(images/skins/'+currentBg+')'}); 
});

來源

2012-03-01 Blainer

我想知道這一點。 – GeekMasher 2012-03-01 21:11:25

我不相信你可以，唯一的方法（我知道的），將有一個塊級元素（DIV爲例），其具有的背景和出現的背後其餘的內容（絕對定位）並淡入淡出，而不是切換背景。

來源

2012-03-01 21:11:26 rastating

從技術上來說，還有另外一個選擇：獲取該圖像，在畫布上繪製一些字母，讀回數據/網址並設置背景......但這更加複雜。 – kirilloid 2012-03-01 21:14:09

您不能爲改變背景圖片的不透明度設置動畫。

可能是你可以在不同的部分需要不透明度的圖像，然後動畫背景的位置，使它給人一種fadeIn行爲。

看看這個link它會幫助你。

來源

2012-03-01 21:11:42 ShankarSangoli

沒有方法可行淡出的背景圖像，你必須創建一個容器，並設置其背景圖片讓它淡入和淡出。

來源

2012-03-01 21:11:54

我以前浮動前景圖像在一個單獨的div你想在爲「褪色」，然後創建前景圖像上一個jQuery淡出效果的背景圖像上做了這樣的事情。

您可以使用類似的技巧在半透明的「背景」上設置純文本。

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

來源

2012-03-01 21:17:46 AshBrad

我同意int0x90。

你可以做的是這樣的：

堆棧您的圖像在一個div，風格定位絕對的，樣式設置一個ID爲DIV
絕對
每個圖像位置添加一個類活躍，有10
集的div的z-index所有非活動圖像的z-index爲0
可以使用的z-index以最高的z-index圖像拉至堆棧的頂部
將活動類添加到導航欄鏈接的點擊上並將其從前一個點擊中刪除，以便圖像的z-index設置回0並且不會被覆蓋。 jQuery中
，你現在可以能夠使用不透明的變化和變化

希望這有助於讓你開始的速度！

來源

2012-03-01 21:19:58

其他許多人已經說過，除非您使用塊元素作爲背景，否則這是不可能的。但是，如果你只想要一個動畫，你可以有一個.gif作爲背景，然後當它的動畫完成替換它與真實圖像，所以.gif不會迭代本身

來源

2012-03-01 22:42:50

淡入淡出背景圖像

回答

相關問題