0

100％100％のスケールが必要な巨大な背景画像があります。しかし、私の問題は、下にスクロールしてWebサイトの残りの部分を表示したときに、Webページがブラウザーの150％の高さである場合（つまり、ブラウザーは1000x1000であり、私のWebサイトは1000x1500）、背景が繰り返され、縮小されないことです。 。

私のCSSは

html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }

どうすればそれを修正できるか考えていますか？

4

4 に答える 4

1

CSS-Tricksの記事で説明したように、CSSを次のように変更できます。

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これにより、背景画像がページ全体をカバーするようになりますが、CSS3でのみサポートされます。上記のように、主要なブラウザごとに特定のコードを含める必要があります。

または、次を使用してみてください。

height: 100%;

また

width: 100%

ページに関連する画像のサイズによって異なりますが、これにより、アスペクト比を適切に維持しながら、画像をページの適切な高さ/幅にサイズ変更できます。

于 2012-11-05T18:19:20.497 に答える
1

これは、そのトピックに関する優れたリソースです。

http://css-tricks.com/perfect-full-page-background-image/

それが役に立てば幸い。

于 2012-11-05T15:41:21.613 に答える
0

html代わりに背景画像を に適用してみてください。

于 2012-11-05T15:31:57.220 に答える
0

高さよりも小さい場合は幅を 100% に設定し、それ以外の場合は高さを 100% に設定します。おそらくjavascriptで修正できます。

于 2012-11-05T15:32:13.053 に答える