5

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

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

我已经尝试在加载页面时调整 content-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，尽管这可能是解决问题的一种方法。

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

4

4 回答 4

1

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

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

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

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

于 2010-03-21T00:38:35.200 回答
0

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


        var div = document.getElementById("content");
        div.addEventListener("resize", adjustContentHeight, false);
于 2010-03-28T15:09:25.223 回答
0

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

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

于 2010-04-14T07:46:25.183 回答
0

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

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

于 2010-03-24T09:18:53.287 回答