1

我正在尝试使用视差制作网站。

我在使用 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;
}

我的问题是，如果我没有明确放置高度，背景图像就不会变成全屏。

有什么建议吗？

4

2 回答 2

1

对于任何元素的百分比高度，它的父元素必须设置某种高度。该父级的高度也可以是一个百分比，但是，在这种情况下，要使该百分比起作用，它自己的父级也必须设置某种高度。这一直到 html 元素。

在您的情况下，如果#skrollr-body是元素的直接子body元素，则必须将其包含在样式表中：

html,
body, 
#skrollr-body {
    height: 100%;
}
于 2013-01-06T03:32:45.737 回答
1

我在使用“background:cover”和 skrollr 时遇到了同样的问题。

问题源于“封面”指定图像的大小（以覆盖元素）并且skrollr使用“背景位置”来偏移图像......如果图像仅与包含它的元素一样大，当它'skrolls'时，它会留下空白。我正在写一些 jquery 来调整我的背景大小，使其相当于“cover + 10%”。

如果有人在我之前完成这个，我很乐意看到它！

~~ 一个更简单的选择是确保您的图像比它的宽度高得多。（如果您使用 skrollr 对其进行垂直动画处理）

于 2013-09-09T21:03:57.447 回答