CSS和不同尺寸的显示器？答案

【问题标题】：CSS and different size of monitor?CSS和不同尺寸的显示器？
【发布时间】：2011-03-02 13:06:27
【问题描述】：

我正在做一个网站 (WIP)。我遇到了一些CSS问题，希望你们能帮助我。

我现在的情况：

我的问题：

【问题讨论】：

【解决方案1】：

如果它只是一个你可以使用的徽标文件

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

【讨论】：

【解决方案2】：

#your_img {

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

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

【讨论】：

【解决方案3】：

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

它可能在 Internet Explorer 上不起作用，但您可以使用 position: absolute 的小技巧，如上所述

【讨论】：

【解决方案4】：

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

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

【讨论】：

谢谢，它有效。但我需要再等 9 分钟才能接受答案。谢谢 Graphain
欢迎小学生，乐于助人。值得注册，这样您就可以随着时间的推移跟踪您的问题和答案，并鼓励其他人帮助您。
嗨 Graphain，它适用于 FF、chrome、opera 和 safari。但是在IE上不行，图片不显示。
问题已解决。而不是像这样将所有属性放在 1 行中： background: url('images/bg.png') 50% 50% no-repeat;我将它们分成： background: url('images/bg.png') no-repeat;背景位置：50% 50%;
很好的修复。也许顺序在 IE 上很重要，或者缺少一个属性（比如开始时的 bg 颜色）。