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

难道你不能将布法罗图像与该图像中的其他元素分开吗？或者所有这些都必须成为背景图像的一部分吗？

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

Answer 2

我建议将整个用户界面放在一个完整的图像中，然后在上面应用你的文字可能会让你最悲伤。

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

通过这种方式，您可以确保使用CSS将主图形（即徽标和“即将推出”文本）放置在中心，您可以使用CSS将这些框格式化为固定比例，这些可以根据浏览器分辨率。

内容定位在背景图像上

2 个答案: