内容位于背景图像上方

Content positioned over background image

本文关键字：图像 背景 于背景      更新时间：2023-09-26

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

这段代码可能对我想要实现的目标并不重要，我不完全确定。

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

如有任何协助，我们将不胜感激！

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

如果是我，我只会把水牛的照片作为背景图像。我会用HTML创建其他元素。如果必须根据媒体查询更改它们的大小，则可以进行更改。

我建议将整个UI放在一个完整的图像中，然后在上面应用文本，这可能会给你带来最大的悲伤。

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

通过这种方式，您可以确保使用CSS将主图形（即徽标和"即将到来"的文本）定位在中心，您可以使用CSS将框具体调整为固定比例，并且这些框将根据浏览器分辨率进行更有效的缩放。

相关文章：