我有一个主要的div,带有填充屏幕的背景图片。我想让这个图片不断地变化,这个功能很好实现。但问题在于,放在背景div上面的其他div也被淡出了,这样整个页面就变空了。请问如何只淡出背景而保留其他内容显示在屏幕上?非常感谢您对此问题的任何建议!
HTML
<div id="hpbg-image">
<div id="header">
<div id="logo"><img src="images/logo.png"></div>
<div id="login"><img src="images/login.png"></div>
<div id="menu">
</div>
</div><!--Header End-->
<div id="search-area">
<div id="holder1">
<img src="images/slogan.png"><br>
<div id="searchbox">
</div>
</div>
</div>
</div>
<div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
<div id="howitworks">
<b>How it works</b>
</div>
<div id="freelancers" style="height:300px">
</div>
CSS
#hpbg-image {
position: relative;
height: 100%;
width: 100%;
background: url(images/image1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#menu {
padding-top:20px;
padding-right:170px;
position: absolute;
right:0;
color: #ffffff;
font-family: 'Verdana',serif;
}
#login {
padding-top:8px;
padding-right:50px;
position: absolute;
right:0;
}
#holder1 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
width:838px;
}
#searchbox {
height:78px;
width:458px;
background: url(images/searchbg.png);
background-repeat: no-repeat;
padding-top: 22px;
padding-bottom: 18px;
padding-left:40px;
text-align: center;
margin: 0 auto;
}
jQuery
$(document).ready(function() {
var images = [];
images[0] = "images/image1.jpg";
images[1] = "images/image2.jpg";
images[2] = "images/image3.jpg";
var i = 0;
setInterval(fadeDivs, 2000);
function fadeDivs() {
//start with id = 0 after 5 seconds
$('#hpbg-image').css("background-image", "url("+images[i]+")").fadeOut(500, function() {
$(this).css("background-image", "url("+images[i]+")").fadeIn(500);
});
i++;
if (i == 3)
i = 0; //repeat from start
}
});
#stuff
不需要绝对定位,只有#hpbg-image
。 - Turnip