CSS 和不同尺寸的显示器？

Question

我正在做一个网站（WIP）。我遇到了一些CSS问题，希望大家能帮助我。

我目前的情况：

• 我有一张图像，我们将其命名为“bg.png”，宽度约为2500px，背景图像的中心有我的徽标。
• 我的网站应该针对所有尺寸（从小 800 x 600 到 2400 x XXX）用户。

我的问题：

• 如何居中背景图像（bg.png），以便徽标始终位于不同尺寸的显示器屏幕的中心（水平）？

Answer 1

body { background: url('bg.png') 50% 50% no-repeat; }

这会将全尺寸图像放置在页面中央，用户将在浏览器窗口允许的范围内看到尽可能多的背景图像。

Answer 2

#your_img {
  width: 2500px; //In example 2500px
  margin: 50%;
  padding: -1250px; // 2500 divided by 2
}

它可能不适用于 Internet Explorer，但您可以使用position:absolute的一点技巧，如上所述

Answer 3

#your_img {

   position: absolute;
   left: 50%;
   margin: -1250px;
}

当您将 img 元素放入另一个盒子时，此解决方案是必要的。但要小心 - 它可能会改变父母盒子的大小。

Answer 4

如果它只是一个徽标文件，您可以使用

<style>
img
{
    position:absolute;
    left:-50%;
    top:-50%;
    z-index:-1;
}
</style>