[英]Jquery - making background image rotate with 100% height
我有一個4圖像背景滑塊使用Jquery。 所有圖像旋轉都很好,那里沒有任何問題。 但是,我希望圖像始終保持在屏幕的固定高度和寬度。 目前,如果你向下滾動很多,背景圖像不會保持固定,你只看到一個空白的背景。 我希望用戶屏幕的圖像始終是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">
<!-- ALL MY PAGE CONTENT IS STORED IN HERE-->
</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);
});
你嘗試過的位置:固定嗎?
#content-background
{
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
可能需要添加另一個容器
<div id="content-background">
<div id="relative-container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
</div>
</div>
#relative-container
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.