0

画面（ビューポート）のサイズに関係なく、静的でビューポートを埋める完璧な完全な背景画像を作成したいと考えています。

そこで、次の CSS を使用します。

body, html{
   width: 100%;
   height: 100%;
   background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed;
   margin: 0;
   padding: 0;
   -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

今の問題は...私が理解している限り、ビューポートのサイズが画像のサイズを超えると、画像が伸びてピクセル化します...

最大サイズが渡されないようにするにはどうすればよいですか?

また、Retina ディスプレイの解像度に対応したい場合、この画面サイズの問題に対処する最善の方法は何ですか? 本文、html 要素に最大幅を設定しますか?

ありがとうございました

4

1 に答える 1

1

クエリを使用@mediaして、ページ全体をカバーする画像の解像度を決定できます。解像度が大きくなった場合は、別の画像に置き換えるか、後で画像をカバーする必要がない場合は、単純にcenter値background positionと aを使用します。background color特定の解像度では、これにより画像がピクセル化されなくなります。たとえば

デモ(目的の効果が得られるようにフィドル ウィンドウのサイズを変更します)

html, body {
    height: 100%;
    width: 100%;
}

body {
    background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');  
    /* If it exceeds 699px width, you can also replace the image here... */
    -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

@media all and (max-width: 699px) {
  body {
        background-color: #000;
        background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
        background-size: 200px 200px;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

注：この例では、デモンストレーション目的で使用@media all and (max-width: 699px)しました。これを、画像の元の高さ/幅とルールbackground-size: 200px 200pxの目的の解像度に置き換えることができます@media

于 2013-05-31T11:44:29.560 に答える