javascript - 内容位于背景图片之上

Question

我正在尝试根据背景图片的某些元素来定位内容。我做了很多研究，似乎可以通过 JavaScript 实现，但我对 JavaScript 的功能不是很熟悉。

这是我正在使用的背景图片:http://dl.dropbox.com/u/4650892/bg2.jpg

我正在努力确保信息保留在该图像的 4 个框中。目前，我使用了以下 CSS 来确保背景图像在浏览器中保持完美的大小:

background-image: url('../images/bg2.jpg'); <br />
background-repeat:no-repeat; <br />
background-position:center center; <br />
background-attachment:fixed; <br />
-o-background-size: 100% 100%, auto; <br />
-moz-background-size: 100% 100%, auto; <br />
-webkit-background-size: 100% 100%, auto; <br />
background-size: 100% 100%, auto;

此代码可能对我要实现的目标不是必需的，我不完全确定。

当内容保持在一种分辨率时，定位内容很容易，但一旦调整浏览器大小时，内容就会与图像不连贯地移动。

如有任何帮助，我们将不胜感激!

Answer 1

您不能将 Buffalo 图像和该图像中的其他元素分开吗？还是所有这些都必须是背景图片的一部分？

如果是我，我只会将水牛图片作为背景图片。我会在 HTML 中创建其他元素。如果必须基于媒体查询，您可以更改它们的大小。