1

したがって、ページ全体をカバーする背景画像を持つラッパー div があります。これは一般的に機能します...ブラウザを最大化して背景を完全に覆うことができますが、スクロールがある場合、画像はスクロールのポイントで停止します。

この画像は、jsFiddle の example/1からのスクロールとギャップを示しています。 ここに画像の説明を入力

#wrapper
{
    background: url("../../Images/bgMain.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
}

そして内側のdiv

#inner
{
    margin: 0 auto;
    height: 100%;
    width: 980px;
}

どんなアドバイスも役に立ちます。ありがとう

4

3 に答える 3

0

それは私が取りたかったルートではありませんでしたが...画像とそのすべてのパラメーターをbodydivではなくに設定することで、探している動作を得ることができます。

それが正確な理由はわかりません...どういうわけか、ボディはdivとは異なる方法で処理されます（ただし、リセットスクリプトがあるため、そうなるとは思いません）...

于 2013-05-10T18:13:09.410 に答える
0

問題は .inner の固定幅にあるようです

.inner{
    //...
    width:980px;//this appears to be breaking the css3 background-size
}

考えられる解決策は、.wrapper に最小幅を適用することです

#wrapper {
    background: url("http://placekitten.com/400/300") no-repeat 50% 0 scroll;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    min-width:980px;
}

ただし、これは、かわいい猫が小さな画面で巨大になることを意味します (ただし、.inner に固定幅を適用しているため、これは問題にならない場合があります)。

フィドルを見る

于 2013-04-15T21:56:43.060 に答える
0

私は最近、あなたがやりたいことを実行できるかもしれないことをしました。

    background: #000 url(**snip**) no-repeat 50% 0 fixed !important;

css の最後に!importantを追加してみてください。他のクラスの他のスタイリングを「オーバーライド」します。うまくいくかもしれませんが、何か他のものを壊してしまうかもしれません。

!important の機能については、こちらを参照してください。

于 2013-04-16T02:42:40.060 に答える