无缝连接可重复和不可重复的背景

Question

我有一个 700x300 的背景，在主要内容 div 内无缝重复。现在我想在 content-div 的底部附加一个 div，其中包含不可重复的不同背景图像，与其上方的可重复背景无缝连接。本质上，不可重复图像看起来就像可重复图像的末端部分。

由于图案的性质，除非背景图像的完整 300px 高度在 content-div 背景的最后一次重复中可见，否则下面的 div 中的背景将不会无缝连接。基本上，在所有情况下我都需要内容 div 的高度为 300px 的倍数。解决此类问题的好方法是什么？

我尝试在加载页面时调整内容 div 的大小，但这仅在内容 div 不包含任何调整大小的动态内容时才有效，这不是我的情况：

function adjustContentHeight()
{
    // Setting content div's height to nearest upper multiple of column backgrounds height, 
    // forcing it not to be cut-off when repeated.

    var contentBgHeight = 300;
    var contentHeight   = $("#content").height();
    var adjustedHeight  = Math.ceil(contentHeight / contentBgHeight);

    $("#content").height(adjustedHeight * contentBgHeight);
}

$(document).ready(adjustContentHeight);

我正在寻找一种方法响应 div 调整大小事件，但 似乎没有是这样的事情。另外，请假设我无法访问控制 content-div 中内容大小调整的 JS，尽管这可能是解决问题的一种方法。

我正在考虑的另一个可能的解决方案是根据内容 div 的高度将底部 div 中的背景图像偏移一定量。同样，缺少的部分似乎是响应调整大小事件的能力。

Answer 1

另一种方法是根据内容 DIV 的大小计算底部和顶部 DIV 的 background-position 样式。您可以使用负位置将一个的底部与另一个的顶部对齐。

另一种方法是使用分层 DIV 方法，其中顶部、内容和底部都是包含背景的父 DIV 的子项。

这些方法的好处是，它不会仅仅为了管理背景而改变内容 DIV 的自然呈现。

示例：http://bin.googlecode.com/svn/ trunk/css/repeating-bg-content.html

Answer 2

在你的CSS中设置background-position:fixed可以帮助吗？然后您的底部 div 可以移动，但其背景图像相对于页面顶部将保持固定。随着更多的重复图像被显示，更多的底部图像将被隐藏。

这将属于“根据内容 div 的高度将底部 div 中的背景图像偏移一定量”的标题，而不是“在所有情况下内容 div 的高度都是 300px 的倍数”的标题。

Answer 3

您可以尝试向 div 添加 事件监听器：

        var div = document.getElementById("content");
        div.addEventListener("resize", adjustContentHeight, false);

Answer 4

如果顶部没有任何内容需要匹配，请将重复图像放置在 div 的底部（这样溢出就会溢出顶部）。像这样：

div#repeating {background:transparent url('/path/to/image')repeat left Bottom; }