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

Question

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

我有一个 div

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

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

谢谢

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