1

背景を設定しようとしていますが、この画像は機能しません。サイズは15～20MBなので5MBにしてみました。まだ運がありません。サイズが 25KB の非常に小さな画像を作成しましたが、うまくいきましたが、同じことが繰り返されました。私のローカルホストも大きな画像を表示しません。何か制限はありますか？完全な画像ページを取得するにはどうすればよいですか?

body {
    background-image:url(background.jpg);
}
4

4 に答える 4

1

画像を繰り返さないようにするには、次のようにします。

body
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

background-size: cover次のように実験することもできます。

body
{
    background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

これは、動作をテストするための背景画像として美しいDoodle 4 Googleを使用した JS Bin のデモです。

http://jsbin.com/ivexah/2

于 2013-02-09T22:13:08.203 に答える
0

ボディに幅と高さを割り当てる必要があります。例えば：

html, body {
   width: 100%; 
   height: 100%;
}
于 2013-02-09T22:13:13.347 に答える
0

省略形のbackgroundcss プロパティを使用できます。

background: url(background.jpg) no-repeat;

また、bodyページにコンテンツがないため、高さが 100% にならない場合もあります。htmlとの高さを 100% にするかbody、ページにコンテンツを追加してください。

背景画像でコンテナ全体を覆うようにするには、background-sizeを使用します。

background-size: cover;

IE8 以下はこれをサポートしていません。これらのブラウザには、javascript フォールバックが必要です。css-tricks.com には、さまざまな手法を示す優れた記事があります。

于 2013-02-09T22:21:22.123 に答える
0

背景画像に「サイズ」の制限を設けるべきではありません。おそらく、ファイルが大きすぎて、ロードするのに十分な時間待機していないか、幅と高さを設定していません。寸法がないと、背景画像をロードしようとしている要素のサイズは基本的に 0px x 0px になります。次の jsfiddle の例を参照してください。

http://jsfiddle.net/GymxW/1/

HTML:

<div class="container"></div>

CSS:

.container {
    width: 400px;
    height: 100px;
    background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&amp;text=background+image);
    background-repeat: none;
    background-position: 0 0;
}

重要: ビューポートのフル サイズに「引き伸ばされた」画像が必要な場合、簡単な解決策はBackstretchなどのプラグインを使用することです。

于 2013-02-09T22:28:49.287 に答える