无法使背景图像全屏

我遇到了CSS的麻烦。下面是HTML：

<div id="skrollr-body"> 

     <div class="subnav"> 
      <ul id="nav"> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#foo">Foo</a></li> 

      </ul> 
     </div> 


      <div id="home" class="centered" data-0="height:100%;" data-1000="height:0%;" > 
       <div class="zebra"> 
        <div class="contentWrap"> 

          test 

        </div>   
       </div> 
      </div> 


      <div id="foo" class="centered" data-1000="height:100%;" data-2000="height:0%;"> 
       <div class="world"> 
         <div class="contentWrap"> 

           test 

         </div>   
       </div> 

      </div> 
</div>

这里是CSS：

#home { 
    background: #dedede; 
    height: 100%; 
    z-index: 901; 
} 
#foo{background: yellow; z-index:800;} 

.zebra { 
    background-image: url("/img/zebra-pattern.png"); 
    background-position: center center; 
    background-repeat: repeat-x; 
    background-size: cover; 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

.world { 
    background-image: url("/img/world.jpg"); 
    background-position: center center; 
    background-repeat: repeat-x; 
    background-size: cover; 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

.contentWrap{ 
    position: absolute; 
    border: 1px solid red; 
}

我的问题是，如果我不把高度明确，背景图像不成为全屏幕。

有什么建议吗？

来源

2013-01-06 DarthVader

JsFiddle会帮我处理它。 – 2013-01-06 03:33:22

对于要在任何元素上工作的百分比高度，它的父级必须设置某种高度。父母的身高也可以是一个百分比，但是，在那种情况下，为了达到这个百分比，它自己的父母也必须设置某种高度。这一直到html元素。

在你的情况，如果#skrollr-body是body元素的/直接孩子，你必须在你的样式表包括此：“：封面背景”和skrollr

html, 
body, 
#skrollr-body { 
    height: 100%; 
}

来源

2013-01-06 03:32:45 banzomaikaka

我已经有了：'＃skrollr-body {width：100％;高度：100％;位置是：固定; } ＃skrollr-body div {width：100％;高度：100％;溢出：隐藏;位置：绝对的; }' – DarthVader

也在'body'和'html'元素上呢？ – banzomaikaka

是' html， body { width：100％;高度：100％; }' – DarthVader

我已经使用了同样的问题。

问题源于“遮盖”指定图像的大小（覆盖元素），skrollr使用“背景位置”来抵消图像...如果图像只有包含它的元素，当它“滚动”时会留下空白。我写了一些jquery来调整我的背景，使其相当于“封面+ 10％”。

如果任何人在我做之前完成此操作，我很乐意看到它！

~~更容易的选择是确保图像比宽度高得多。（如果你是用skrollr垂直动画的话）

来源

2013-09-09 21:03:57 cdawsonhall

无法使背景图像全屏

回答

相关问题