我有一个使用Jquery的4图像背景滑块。所有图像旋转良好,没有任何问题。然而,我希望图像始终保持在屏幕的固定高度和宽度。此刻,如果你向下滚动很多,背景图像不会保持固定,你只会看到一个空白的背景。我希望图像始终是用户屏幕的100%宽度和高度,即使他们向下滚动。有人能指出我犯的CSS错误吗。
HTML格式
<body>
<div id="content-background">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
</div>
<div class="full-body">
</div>
</body>
CSS格式
#content-background{
width: 100%;
height: 100%;
position: relative;
}
#img1{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-shopping.jpg);
background-size: cover;
}
#img2{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-movie.jpg);
background-size: cover;
}
#img3{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-gas.jpg);
background-size: cover;
}
#img4{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-grocery.jpg);
background-size: cover;
}
.full-body{
display: block;
position: absolute;
z-index: 1001;
width: 100%;
top: 0;
left: 0;
}
我的Jquery代码,但我认为这不是问题,因为它工作正常
$(function(){
function rotate(){
$('#content-background div').last().fadeOut(1000, function(){
$(this).insertBefore($('#content-background div').first()).show();
});
}
setInterval(function(){
rotate();
},5000);
});
