2010-12-10 159 views
2

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

我有

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

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

感謝

回答

4

這是一個開始。

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重置兒童的不透明度。

1
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 
+0

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

3

如果要動畫順利,沒有做太多的額外工作 - 這是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的褪色。

+0

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

+0

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