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

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

我现在的情况:

  • 我有一张图片,我们称之为“bg.png”,宽度约为 2500 像素,背景图片的中心有我的徽标。
  • 我的网站应该面向所有规模(从 800 x 600 到 2400 x XXX 的小型)用户。

我的问题:

  • 如何使背景图片(bg.png)居中,使徽标始终位于不同尺寸的显示器屏幕的居中(水平)?

【问题讨论】:

  • 作为新用户,如果答案符合您的需求,请务必点击“接受”。
  • 顺便说一下问题(当前情况 -> 问题/期望的行为)。
  • 您应该知道有些屏幕大于 2500。而且您也可以在多个屏幕上扩展某些内容。所以 2500 不是一个足够大的限制。
  • 谢谢大家,你们都很友好和乐于助人:)

标签: css image background-image


【解决方案1】:

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

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

【讨论】:

  • 这不会使图像完全居中。图像的左侧居中,但图像的中心未居中。
  • 为此,添加 margin-left: -50%, margin-top: -50%。
【解决方案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 颜色)。
      猜你喜欢
      • 2015-02-16
      • 2019-11-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-19
      • 2012-09-17
      • 2012-05-23
      • 2018-06-11
      相关资源
      最近更新 更多