0

背景画像のスケールとレスポンシブ デザインに問題があります。

コンテンツ画像の背景とともに、単純なヘッダー画像の背景があります。ヘッダー画像はコンテンツにシームレスに溶け込むはずです。どちらの画像もきめの細かいテクスチャを持っているため、常に同じ縮尺である必要があります。

ヘッダーの背景は<img>タグにありますが、コンテンツはbackground-imageです。不明な量のコンテンツに対してリピート機能を利用する必要があるためです...

しかし、スケーリングされたインライン画像と背景の間の粒子の違いを見ることができます:

ヘッダー/コンテンツ分割

私はbackground-size属性を認識していますが、これは下位互換性がなく、応答性に優れているかどうかはわかりません.

私のCSS：

#header{

    max-width:700px;
    width:100%;
    margin:0 auto;

}

#header img{

    max-width:700px;
    width:100%;

}

#content{

    max-width:700px;
    width:100%;
    height:600px;    // <-- for testing with no content
    margin:0 auto;

    background-image:url('../imgs/bg-main.jpg');
    background-repeat:repeat-y;

}

関連する HTML :

<section id="header">
    <img src="lib/imgs/bg-top.jpg"/>
</section>
<section id="content">
    <!-- content goes here !-->
</section>

修正またはいくつかのオプションに関するヘルプは素晴らしいでしょう。

4

1 に答える 1

1

ヘッダー画像を透明なpngにすることを検討していただけますか? ヘッダー画像の明るい茶色のテクスチャを残して、#header と #content をラップする要素の背景画像として設定します。

そうでなければ、background-sizeあなたが望むことをします。IE8 の訪問者は、あなたが求めている適切な効果を目にすることはありませんが、それは最近の世界で最悪のことではありません。

参照: http://caniuse.com/background-img-opts

于 2013-09-14T01:00:32.117 に答える