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 / what）。

已更新但语义较少的版本：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)

Answer 2

此示例包含上面的代码

＆＃13;

$(document).ready(function(){
    var img1 = "http://www.clarkcraft.co.uk/images/des/48040.jpg";
    var img2 = "http://glamorouslymommy.com/wp-content/uploads/2013/05/small-background1.jpg";
   setInterval(function(){ 
       var randomImage = Math.floor(Math.random() * 18) + 1;
       if(randomImage<=5){     
$("div").css("background","url("+img2+")").show().fadeOut("slow");              $("div").css("background","url("+img1+")").show().fadeIn("slow");
       }
       else{
$("div").css("background","url("+img1+")").show().fadeOut("slow");           $("div").css("background","url("+img2+")").show().fadeIn("slow");
       }
   }, 1000);
});

＆＃13;

div {
  width:200px;
  height:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:none"></div>

＆＃13;

js backgroundImage（）在加载时淡入？

2 个答案: