我可以動畫CSS背景圖片的不透明度嗎？

CSS/Javascript不是我的強項，所以我想問問是否可以將背景圖像不透明度更改爲0.5。我可以動畫CSS背景圖片的不透明度嗎？

我有

background-image: url(images/nacho312.png); 
background-position: -50px 0px; 
background-repeat: no-repeat no-repeat;

一個div但是當我加載某個視圖它看起來並不太好，所以我希望有一個「半disolve」效果時，表明觀點。可能嗎？

感謝

來源

2010-12-10 nacho4d

這是一個開始。

var element = document.getElementById('hello'), 
    targetOpacity = 0.5, 
    currentOpacity, 
    interval = false, 


interval = setInterval(function() { 

    currentOpacity = element.getComputedStyle('opacity'); 

    if (currentOpacity > targetOpacity) { 
     currentOpacity -= 0.1; 
     element.style.opacity = currentOpacity; 

    } else { 
     clearInterval(interval); 
    } 


}, 100);

See it on jsFiddle。

在window.onload = function() { }上運行此操作或研究DOM就緒事件的跨瀏覽器。

當然，像jQuery這樣的庫更容易。

$(function() { 
    $('hello').fadeTo('slow', 0.5); 
});

這依賴於你的容器的孩子繼承不透明度。要做到這一點，不會影響他們是有點痛苦，因爲你不能通過opacity: 1重置兒童的不透明度。

來源

2010-12-10 02:08:25 alex

background-image: url(images/nacho312.png); 
background-position: -50px 0px; 
background-repeat: no-repeat no-repeat; 

opacity:0.5; //for firefox and chrome 
filter:alpha(opacity=50); //for IE

來源

2010-12-10 01:58:35

那裏沒有動畫（見OP的標題）。 – alex 2010-12-10 02:11:03

如果要動畫順利，沒有做太多的額外工作 - 這是jQuery的一個很好的任務（或另一個類似的庫）。

使用jQuery you could do：

$('#id_of_div').fadeTo('fast', 0.5);

要獲得相關DIV快速動畫淡入淡出效果。

更新：如果你想實際淡入背景圖像，但不是DIV的任何前景內容，這是一個很難。我建議使用一個容器DIV，位置：相對，兩個內部DIV，位置：絕對; 。第一個內部DIV可以具有背景圖像和比第二個DIV更低的z-index，並且第二個DIV可以包含任何文本等以在前景中顯示。當需要時，您可以撥打$('#id_of_first_div').fadeTo('fast', 0.5);以淡化包含背景圖像的DIV。

順便說一句，你的問題的文字回答是「不，你不能動畫CSS背景圖像的不透明度」 - 你只能（當前）動畫DOM元素的不透明度，而不是它的屬性，因此需要上面的黑客。

其他更新：，如果你想避免使用任何第三方庫，你可以處理使用方法在Alex's answer背景DIV的褪色。

來源

2010-12-10 02:07:40

這個問題沒有標籤`[jquery]`。 – alex 2010-12-10 02:19:58

這就是我剛纔所說的，我也收到了包含div的消息。所以，我現在看到，我需要一個專門爲我的背景圖像的div，對吧？謝謝;） – nacho4d 2010-12-10 02:22:17

我可以動畫CSS背景圖片的不透明度嗎？

回答

相關問題