0

これが私が話しているイメージです。

http://i.imgur.com/KkH8ryV.jpg

現在、それは私のニュース コンテンツの背景として機能しています。茶色の部分がタイトル、黄色の部分がコンテンツです。

コンテンツ領域に長いテキストを書き込むと、画像が十分に大きくないため、テキストが div からはみ出してしまいます。

画像を3つに分割したい。

  1. ヘッダ
  2. 真ん中
  3. フッター

ヘッダーとフッターは常に一度適用されます。中央は、テキストの長さに応じて繰り返す必要があります。

CSSでこれを達成するにはどうすればよいですか?

PS: 分割された画像を「header.png、middle.png、および footer.png」と呼ぶことができます。

4

1 に答える 1

0

HTML

<div id="parentDiv">
   <div id="header">
   </div>
   <div id="middle">
   </div>
   <div id="footer">
   </div>
</div>

Image の幅が 300px だとします。

CSS

#header
{
     width:300px;
     height:100px;
     background-image: url("header.png");
     background-repeat: no-repeat;
}
#middle
{    width:300px;
     height:400px;
     background-image: url("middle.png");
     background-repeat: repeat-y;
     /*If the width will be bigger than the actual
       width of the image, then add:
       background-repeat: repeat-x;
     */
}
#footer
{
    width:300px;
    height:100px;
    background-image: url("footer.png");
    background-repeat: no-repeat;
}

background-repeatについての詳細。

画像が繰り返されることに注意してください。これは見栄えがよくありません。中央に固定の高さを与えて使用することをお勧めします。overflow:auto;これにより、コンテンツがサイズを超えたときにスクロールバーが作成されます。

于 2013-01-30T15:11:39.573 に答える