css - 我怎样才能把这张图片分成几块，这样当我写一个长文本时，它就不会超出 div 的范围？

Question

这就是我正在谈论的图像。

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

现在它作为我的新闻内容的背景。棕色区域是标题，黄色区域是内容。

当我在内容区域写入长文本时，由于图片不够大，文本会超出 div。

我想将图像分成 3 块。

1. 标题
2. 中间
3. 页脚

页眉和页脚将始终应用一次。中间必须根据文本的长度重复。

如何在 CSS 中实现这一点？

PS：您可以将分割图像称为“header.png，middle.png。和footer.png”

Answer 1

HTML

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

假设图像的宽度为 300 像素。

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;
}

更多关于背景重复。

注意图像会重复，看起来不太好，我建议给中间一个固定的高度，并使用，overflow:auto;当内容超过大小时会创建一个滚动条。