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

divの内部をスクロールしているように見えますcontent divが、content divそれ自体はスクロールされていません。W3CのMarkupバリデーターによってサイトで見つかったエラーのリストを調べてみてください。

于 2013-02-18T20:16:55.473 に答える
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 に答える
1

を に設定してみてbackground-attacmentくださいscroll。MDNには、このプロパティのドキュメントがあります。

于 2013-02-18T20:20:38.930 に答える