3个垂直背景图像显示为一个图像，其中包含中心图像。中心图像“中断”并且与页脚图像不匹配

Question

jsfiddle链接：http://jsfiddle.net/djDWF/84/

问题是，文本/图像的内部容器（文本填充）边距/宽度正在影响中心背景图像。触摸页脚的重复图像不会延伸到完整高度，并切断，因此中心和页脚图像不匹配（这很难说，但如果您在我的jfiddle示例中添加或删除文本，您可以看到中心图像会在符合页脚的位置发生变化。）。

这是针对一个学校项目，虽然我不需要实际做这种类型的图像背景，但我得到了这么远，所以不妨继续。如果可能的话，我不想使用javaScript，因为这还不是课程的一部分。

我尝试删除文本包装并单独设置每个p标签样式，但会产生相同的效果。

我还尝试使用行高和边距进行数学组合。如果我将行高设置为等于右边距和下边距，并且左边距等于页脚的高度，那么效果会起作用，但由于我的页脚图像太大，这不是一个可行的解决方案。

数学上我试图保持与页脚高度相同的比例，但这也不起作用（或者我做错了。我尝试将每个分开相同的数量。）

有没有办法只使用CSS而不必诉诸表格？

Answer 1

所以简而言之，问题是：你可以看到一条线显示在页脚分隔处，因为重复的中心背景没有完全显示它的最后一次重复，因为容器不够大。

解决方案：如果它不需要变量，并且您知道要放入多少内容，则只需设置一个高度：实例 - http://jsfiddle.net/djDWF/85。< / p>

div#background-center{
    background:url(http://i.imgur.com/gsNFa.png) repeat-y;
    float:left;
    width:700px;
    height: 1604px; /* add this */
}

显然，选择适合你最终文本的任何高度。

使用当前图像，如果不使用JavaScript，则无法自动执行此操作。