javascript - js backgroundImage() 在加载时淡入？

Question

我使用 javascript 来显示我的背景图像，因为我希望在每次重新加载时都有一个随机背景图像。不管怎样，正因为如此，我典型的 CSS 过渡和动画不起作用，因为它不是淡化背景，而是淡化我体内的文本。

有什么办法可以解决这个问题，以便每次重新加载时背景都会淡入吗？

这是我用来显示随机图像的代码:

var randomImage = Math.floor(Math.random() * 18) + 1;
document.body.style.backgroundImage = "url(images/" + randomImage + ".jpg)";

我不确定如何让它淡入……有什么想法吗？

Answer 1

使用:https://css-tricks.com/snippets/css/transparent-background-images/ http://jsfiddle.net/wby2xf6f/1/

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div:after {
  transition: opacity 5s;
  content: "";
  background: url(http://www.wina.ugent.be/style/img/h1.png);
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

div.fadein:after {
    opacity:1;
}

然后使用 Javascript/JQuery 添加类 .fadein。 http://jsfiddle.net/wby2xf6f/1/

旁注:最好在服务器端随机选择背景图像(使用 php/ruby/whatever)。

已更新，但语义较少的版本:http://jsfiddle.net/wby2xf6f/5/

.fill {
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;
    display:none;
    background:url(http://www.wina.ugent.be/style/img/h1.png);
}

$('.fill').fadeIn(5000)