匹配背景纹理与中心div

Question

我有一个文档，其中我在 body上使用40×40像素重复背景纹理。

然后，我有一个宽度和高度的div，并以margin: 40px auto 0 auto;

为中心

现在，此div的背景图像（假设它是960×500，与元素本身相同）具有与body相同的纹理。我无法使用透明的png，因为我试图使用此图像实现图形效果。

但是，要使效果起作用，div的背景需要与body的纹理无缝。用户甚至不应该能够说那里有一个单独的块元素。只是无尽的质地海，中间有一个细节。

这变得困难，因为div被居中，因此，其与左侧的水平距离不同。

如何确保body上的背景纹理总是将div 中的模拟纹理匹配到Pixel ，而不管页面宽度如何？

如有必要，我不害怕使用JS解决方案，但显然会喜欢纯CSS解决方案。

Answer 1

您想做的是将背景图像设置在身体元素上，以便从中间开始。所以：

body {
    background: url(to/your/tile.png) 50% 0;
}

这意味着无论窗口如何调整大小，您都会在重复模式中具有可预测的区域。

然后，您必须量身定制包含Div的背景才能使瓷砖在体内。

这是一些代码，显示了该方法的工作方式：http：//jsbin.com/olabos/2/edit。请注意，调整窗口的大小不会使模式退出同步。悬停在预览的中间，以查看包装div在哪里。

注意：此技术的一些警告，具体取决于浏览器如何处理半像素，您将在后台获得1像素差异。我不知道另一种可以解决您的问题的技术，所以希望您能以1px的态度生活。

Answer 2

如果要使用40x40瓷砖图像作为您的身体背景，而960x500图像在其顶部具有相同的背景，请使用以下代码：

body {
    background: url(repeat.png) top center repeat; /* 40x40 image goes here */
}
div {
    background: url(overlay.png); /* overlay image goes here, must be multiple of 40px wide, example is 960px wide x 500px tall */
    width: 960px; /* must be multiple of 40px wide */
}

您可能需要编辑此CSS片段，并且您可能需要对覆盖式图像进行一些调整以使接缝对齐，但这应该与彼此对齐。我以前在几个站点上使用过它，并且运行良好。

如果您有任何疑问，或者我忽略了某种情况，请告诉我，我可以再看一下。您的代码的一个示例很有用。