我试图在我的网站背景上淡化一些图像,但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;
}
JQuery:
$('#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);
});
不能直接为元素的背景图像属性设置动画。不过,你可以淡入整个元素,所以试着创建一个包含图像的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。
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。干杯