Question

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

然后我有div设置宽度和高度并以margin: 40px auto 0 auto;为中心

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

但是，要使效果起作用，div的背景需要与body的纹理无缝连接。用户甚至不能告诉那里有一个单独的块元素;只是一个无尽的质感海洋，中间有一个细节。

由于div居中，这变得很困难，因此，它与左边的水平距离会发生变化。

如何确保body上的背景纹理始终与div 中的模拟纹理匹配到像素，而不考虑页面宽度？

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

Answer 1

如果您尝试使用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代码段，您可能需要对覆盖图像进行一些调整以使接缝排列，但这应该与彼此很好地排列。我之前在一些网站上使用它并且效果很好。

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

Answer 2

您要做的是将body元素上的背景图像设置为从中间开始。所以：

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

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

然后你必须定制包含div的背景以在体内制作平铺。

以下是一些代码，展示了此方法的工作原理：http://jsbin.com/olabos/2/edit。请注意，调整窗口大小不会使模式不同步。将鼠标悬停在预览中间以查看包装div的位置。

注意：对于这种技术的一些警告，取决于浏览器如何处理半个像素，您将在背景中获得1像素的差异。我不知道另一种技术可以解决你的问题，所以希望你可以忍受1px的关闭。

匹配背景纹理与居中的div

2 个答案: