Jquery - 使背景图像以 100% 高度旋转答案

【问题标题】：Jquery - making background image rotate with 100% heightJquery - 使背景图像以 100% 高度旋转
【发布时间】：2014-03-19 15:03:18
【问题描述】：

我有一个使用 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">
      <!-- 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);
});

【问题讨论】：

标签： jquery image background position fixed

【解决方案1】：

你试过 position:fixed 吗？

#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

【讨论】：

我想我什么都试过了，但哈哈。谢谢它现在可以工作了:)