2

我正在尝试淡化我网站背景上的一些图像，但无法正常工作 T_T 。提前致谢 ！

HTML：

<body>
    <div id="menu1"></div>
    <div id="menu2"></div>
    <div id="menu3"></div>
</body>

CSS：

body {
    background-color: #1f304e;
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat; 
    background-attachment:fixed;
    background-position: center 0px;
}

查询：

$('#menu1').click(function(){
    $(body).animate({background : url('images/bg1.jpg') }, 600);
}); 
$('#menu2').click(function(){
    $(body).animate({background : url('images/bg2.jpg') }, 600);
}); 
$('#menu3').click(function(){
    $(body).animate({background : url('images/bg3.jpg') }, 600);
});
4

2 回答 2

4

您不能直接为元素的背景图像属性设置动画。不过，您可以淡入整个元素，因此请尝试创建一个div包含图像的元素，然后将其淡入。

尝试用 div 来模拟背景：

CSS：

#bg {
  background-color: #1f304e;
  background-image: url('images/bg.jpg');
  background-repeat: no-repeat; 
  background-attachment:fixed;
  background-position: center 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

HTML：

<body>
  <div id="bg"></div>
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
</body>

Javascript：

$('#menu1').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg1.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 
$('#menu2').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg2.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 
$('#menu3').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg3.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
});

这将淡出背景，交换图像，然后将其淡入。如果您想要适当的交叉淡入淡出，则背景中至少需要两个 div。

于 2013-07-24T04:37:54.800 回答
4

HTML

<div class="main"></div>

css 

.main { 
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;  
    -o-transition: all 1s ease; 
    transition: all 1s ease;  
    background-image: url(imagesrc);
    background-size: cover;
    background-repeat: no-repeat;
}

JS

setTimeout(function() {

    $(".main").css("background-image", "url(imageSrc)");
}, 2000);

如果你想用多张图片改变背景，那么，

var backgroundPath = "images/";
var backgrounds = ["image1.png", "image2.png", "image3.png", "image4.png"];
var i = 0;

setTimeout(function() {

   var timer = setInterval(function() {

       $(".main").css("background-image", "url(" + backgroundPath + backgrounds[i] + ")");

       i ++;

       if (i >= backgrounds.length) {

           i = 0;
       }

   }, 2000);

 }, 3000);

根据您的要求更改css和js。干杯！！

于 2016-05-04T16:33:24.657 回答