1

看看这个页面：rozbub

如您所见，顶部有一个修复标题，下面有一个可滚动的内容。黑色 div 内的内容滚动良好，但图像是固定的。我怎样才能让这个图像也滚动？

基本上，我将主要包装器定义如下：

body{
    width: 100%;   
    height: 100%; 
    overflow: hidden;
    margin: 0px;
}

#generalWrapper{
    height: 100%;
}

#header{
    height: 70px;
    width: 100%;
    background: #080808;
}

#content{
    overflow: auto;
    position: absolute;
    width: 100%;
    top: 70px;
    bottom: 0;
    background: url("../images/background.jpg");
    background-repeat: repeat-y;
}

具有类似的结构

<body>
    <generalWrapper>
        <header>
        </header>
        <content>
        </content>
    </generalWrapper>
</body>

然后，内容div被元素填充（这使得它div比屏幕高并导致可滚动性）。但是为什么背景图片不受影响呢？

4

3 回答 3

1

看起来您在divs 内滚动content div，但它content div本身没有滚动。尝试查看W3C 的标记验证器在您的站点上发现的错误列表。

于 2013-02-18T20:16:55.473 回答
1

尝试将 设置background-attacment为scroll。MDN有这个属性的文档。

于 2013-02-18T20:20:38.930 回答
1

我尝试了不同的方法。首先，我把背景图片放在了html上，属性如下

html{
    background: url("../background.jpg") center center #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

然后，我将标题和内容更改为

#header{
    height: 70px;
    width: 100%;
    background: #080808;
    position: fixed;
    z-index: 55;
    box-shadow: 5px 5px 5px 5px #080808;
}

#content{
    position: absolute;
    width: 100%;
    top: 70px;
    bottom: 0;
}

这导致了我想要的行为（尽管 Jules Mazur 在评论中考虑的问题没有解决，我会尝试通过为不同的分辨率提供不同的图像来解决这个问题）。

于 2013-02-20T00:18:39.860 回答