0

我有一个文档，我在body.

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

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

但是，要使效果发挥作用，背景的背景div需要与body. 用户甚至不应该知道那里有一个单独的块元素；只是无尽的纹理海洋，中间有一个细节。

这变得困难，因为它div是居中的，因此，它与左侧的水平距离会发生变化。

无论页面宽度如何，如何确保背景纹理始终与像素body中的模拟纹理匹配？div

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

4

2 回答 2

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 片段，并且您可能需要对叠加的图像进行一些调整以使接缝对齐，但这应该使它们彼此对齐。我之前在一些网站上使用过它，并且效果很好。

如果您有任何问题或者我忽略了某个场景，请告诉我，我可以再看一遍。您的代码示例将很有用。

于 2012-11-02T05:04:04.183 回答
1

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

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

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

然后，您必须定制包含 div 的背景以在主体中进行平铺。

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

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

于 2012-11-02T05:12:29.523 回答