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

Question

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

我有一个带有

的 div

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

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

谢谢

Answer 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

Answer 2

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

使用 jQuery you could do:

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

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

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

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

其他更新：如果你想避免使用任何第三方库，你可以使用Alex's answer中的方法处理背景DIV的淡入淡出。

Answer 3

这是一个开始。

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