我可以动画CSS背景图片的不透明度吗？

Question

CSS/Javascript不是我的强项，所以我想问问是否可以将背景图像不透明度更改为0.5。

我有

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

一个div但是当我加载某个视图它看起来并不太好，所以我希望有一个“半disolve”效果时，表明观点。可能吗？

感谢

Answer 1

这是一个开始。

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

Answer 2

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 

Answer 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的褪色。