html - 3 个垂直背景图像显示为一个图像，内容在中心图像中。中心图像 "cuts off"与页脚图像不匹配

Question

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

问题是，文本/图像的内部容器(文本填充)边距/宽度影响中心背景图像。触及页脚的重复图像不会延伸到全高，并且会被切断，因此中心和页脚图像不匹配(这有点难以分辨，但如果您在我的 jfiddle 示例中添加或删除文本，您可以看到中心图像在它与页脚相遇的地方发生变化。)。

这是一个学校元素，虽然我不需要实际做这种类型的图像背景，但我已经走到这一步了，所以还是继续吧。如果可能，我不想使用 javaScript，因为这还不是类(class)的一部分。

我尝试删除文本包装器并分别设置每个 p 标签的样式，但效果相同。

我还尝试了使用行高和边距的数学组合。如果我将 line-height 设置为等于右边距和底部边距，将左边距设置为等于页脚的高度，则效果有效，但因为我的页脚图像太大，这不是一个可行的解决方案。

从数学上讲，我试图与页脚高度保持相同的比率，但这也不起作用(或者我做错了。我尝试将每个比率除以相同的数量。)

有没有办法只使用 CSS 而不必求助于表格来做到这一点？

Answer 1

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

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

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

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

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