0

我正在尝试根据背景图像的某些元素定位内容。我做了很多研究，似乎可以通过 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;

这段代码对于我想要实现的目标可能不是必不可少的，我不完全确定。

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

任何帮助将不胜感激！

4

2 回答 2

2

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

If it was me I would make only the buffalo picture be a background image. I would create the other elements in HTML. You can change their size if you have to based on media queries.

于 2012-08-23T00:47:37.527 回答
0

我建议将整个 UI 放在一张完整的图像中，然后在其上应用您的文本可能会让您感到最悲伤。

我建议您将动物作为背景图像的唯一元素，然后您可以在其顶部添加其他 HTML 元素（例如徽标），然后可以在其他所有内容下方再次添加四个框。

这样，您可以确保使用 CSS 将主图形（即徽标和“即将推出”文本）定位在中心，您可以使用 CSS 将框的大小专门设置为固定比例，并且这些将根据浏览器分辨率更有效地缩放。

于 2012-08-23T00:46:19.533 回答