Question

CSS / HTML新手。我有一个标志，我正在尝试在页面上的位置。在桌面上的Firefox，IE和Chrome上，它出现在我想要的位置。在我的MBPr上它处于不同的位置（Chrome和Safari都显示在同一位置。感谢您的帮助。

我找到了#fsbg技巧here

CSS

#fsbg {
  height: 100%; width: 100%;
  position: fixed;
  z-index: -100;
  left: 0px; top: 0px;
  min-height: 100%;
  min-width: 1040px;
}

#logo {
  position:absolute;
  left:400px;
  right:0;
  top:46px;
  bottom:0px;
  width:100%;
}

#body { font-family: Arial; }

HTML

<body>
  <img src="image.jpg" name="fsbg" width="2880" height="1913" id="fsbg">
  <div id="logo"> 
    <img src="image.jpg" width="201" height="103">
  </div>
</body

它应该是什么样子（'gonenomadic'标志）http://i40.tinypic.com/2qkm3qc.jpg

在我的MBPr上的safari和chrome中它有点低。

Answer 1

你想要一个可扩展的背景？你可以使用纯CSS

body {
    background: url(image.jpg) center no-repeat;
    background-size: cover;
}

这适用于现代浏览器。要在IE8及更低版本上使用，您可以使用backgroundsize.htc https://github.com/louisremi/background-size-polyfill

图像位置在不同浏览器中不一致

1 个答案: