0

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

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

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

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

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

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

有没有办法只使用 CSS 而不必求助于表格？

4

1 回答 1

2

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

解决方案：如果它不需要可变并且您知道要放入多少内容，则可以设置一个高度：实时示例 - 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，就无法自动执行此操作。

于 2012-05-08T22:59:48.577 回答