0

私はこのイメージを持っています:

ここに画像の説明を入力

ページの高さを伸ばしてから、水平方向に繰り返しようとしています。水平方向の繰り返しは正常に機能していますが、ページを垂直方向に覆っていません。

SO からいくつかの例を試しましたが、必要な結果が得られません。

これは私が別の投稿から終わったところですが、今はまったく表示されていません:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        background-image: url(bg-4a-24516.png);
        background-repeat: repeat-x;
        background-size: cover;
    }
    </style>

    </head>

    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>

</html>

助言がありますか？

4

1 に答える 1

0

実際、あなたの例は、コーディングしたとおりに正しく機能します。

背景画像は引き伸ばされており、ブラウザの演色性によっては見づらい場合があります。

次のフィドルを見てください。

http://jsfiddle.net/audetwebdesign/yS4Uz

元の画像を取得し、上下に色付きの境界線を追加しました。

画像はhttp://postimage.org/image/fsv80qegn/で見ることができます。

CSS3 プロパティを使用するbackground-size: coverと、背景画像が引き伸ばされ、特にグラデーションのレンダリングで歪みが発生する可能性があります。

body {
    background-image: url(http://s15.postimage.org/kriqf9i9n/sx_U5g.png);
    background-size: cover;
    background-repeat: repeat-x;
}

に変更coverするcontainと、他のアプリケーションにより適した別の効果が得られます。

于 2013-03-11T17:30:57.993 に答える