-1

こんにちは、背景グラフィックの使用に問題があります。

サイトの構造は次のとおりです。

ヘッダーには、100px の固定高さの 2 つの色が含まれています。メインフレームには、高さが可変のスライス イメージが含まれている必要があります。フッターには 1 つの色が含まれ、高さも 100px に固定されています。

したがって、スライスした画像の高さは 550px で、コンテンツが大きくない場合に備えて、ヘッダーとフッターの間に正確に収まります。

<html>
<body>
    <div class="wrapper">

        <div id="header">header</div>

        <div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>

        <div class="push"></div><!--Push for sticky footer-->

</div><!--Wrapper -->

    <div class="footer">footer</div>
</body>

例

問題は、私のコンテンツが 550px よりも大きくなり、色が薄くなったためにハードエッジが発生し、画像がどこで終了するかがわかることです。そのスライスされた背景画像が自動的にサイズ変更できるといいなと思いました。

cssを使ってそれを実現する方法はありますか?

どうもありがとう。

4

3 に答える 3

3

簡単な答え: 残念ながら、CSS で背景画像のサイズを変更する方法はありません。

多くの場合、background-repeat:repeat-x; を使用した巧妙な回避策があります。または background-repeat:repeat-y; プロパティ、および慎重にスライスされた背景画像の使用。

画像の例があれば、もっとお役に立てるかもしれません。

于 2012-12-04T17:29:57.497 に答える
0

試す

background-size: 100% Auto;
于 2012-12-04T17:07:19.197 に答える
0

あなたは試すことができます

background-size:cover;
于 2012-12-04T17:19:12.730 に答える