如何淡出循环背景图像? [英] How to fade loop background images?
问题描述
Rookie here ..我想让我的静态背景成为一个旋转木马..我当前的html看起来像这样:
< body>
< div class =pageContent>
< / div>
< / body>
和我的CSS:
body {
background:url('http://placehold.it/1600x1200')no-repeat中心固定;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
所以我想让背景循环图像并保持响应。 。这可以很容易使用CSS3吗?或者我应该把我的html的内容在一个旋转木马引导?我没能找到一个很好的例子,如何做到这一点。提前感谢。
Rookie here .. I'm trying to make my static background become a carousel.. my current html looks something like this:
<body>
<div class="pageContent">
</div>
</body>
and my CSS:
body {
background: url('http://placehold.it/1600x1200') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So I'd like to make the background now cycle images and stay responsive .. Can this be done easily using CSS3? or should I maybe wrap the contents of my html in a carousel with bootstrap? I wasn't able to find a good example of how to do this. Thanks in advance.
I would do it using an absolute
positioned DIV
overlaying the body
.
Fade in the DIV
with a new image, then set the same image to body
and hide the DIV
like:
(GRAY is BODY
, SOrange is DIV
)
The increment of the current image Array is achieved by preincrementing ++counter
.
The loop fix is than achieved using Remainder Operator%
to prevent the counter from exceeding the number of images in Array.
The loop itself is done inside .fadeTo()
callback function by simply do a new iteration of the loopBg()
function.
This is the needed CSS:
*{margin:0;padding:0;} /* Global reset */
html, body{height:100%;width:100%;}
body, #bg{ background: #000 none 50% / cover; }
#bg{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
}
And the jQ:
var images = [
"bg0.jpg",
"bg1.jpg",
"bg2.jpg"
];
var $body = $("body"),
$bg = $("#bg"),
n = images.length,
c = 0; // Loop Counter
// Preload Array of images...
for(var i=0; i<n; i++){
var tImg = new Image();
tImg.src = images[i];
}
$body.css({backgroundImage : "url("+images[c]+")"});
(function loopBg(){
$bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200, 1, function(){
$body.css({backgroundImage : "url("+images[c%n]+")"});
loopBg();
});
}());
Edit: If you want to keep the background changing but make the content scrollable, simply add overflow:auto;
to #page
like in this demo: http://jsbin.com/huzayiruti/1/
这篇关于如何淡出循环背景图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!