我可以为CSS背景图像的不透明度设置动画吗？

Question

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

我有一个div

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

但是当我加载某个视图时它看起来不太好，所以当显示该视图时我希望有一个“半解析”效果。 可能吗？

谢谢

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);

在jsFiddle上看到它 。

在window.onload = function() { }上运行此命令，或在DOM ready事件上研究跨浏览器。

当然，使用像jQuery这样的库会容易得多。

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

这依赖于容器的子容继承不透明度。 要做到这一点而不影响它们有点痛苦，因为你不能通过不透明度重置孩子的不opacity: 1 。

Answer 2

如果你想要平滑地制作动画而不需要做太多额外的工作 - 这对于jQuery（或其他类似的库）来说是一个很好的任务。

使用jQuery， 您可以 ：

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

在相关DIV上获得快速动画淡化效果。

更新：如果你想实际淡化背景图像，但不是DIV的任何前景内容，这要困难得多。 我建议使用一个容器DIV，其位置为：relative和两个内部DIV，其位置为：absolute; 。 内部DIV中的第一个可以具有背景图像并且具有比第二个DIV更低的z-index，并且第二个DIV将包含在前景中显示的任何文本等。 需要时你可以调用$('#id_of_first_div').fadeTo('fast', 0.5); 仅淡化包含背景图像的DIV。

顺便说一句，你的问题的字面答案是“不，你不能动画CSS背景图像的不透明度” - 你只能（当前）动画DOM元素的不透明度，而不是它的属性，因此需要上面的黑客攻击。

其他更新：如果您想避免使用任何第三方库，您可以使用Alex的答案处理背景DIV的淡入淡出。

Answer 3

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