【问题标题】:Keep background image CENTERED and UNSCALED regardless of browser window size无论浏览器窗口大小如何,都保持背景图像居中和未缩放
【发布时间】:2013-09-19 10:26:46
【问题描述】:

我正在尝试编辑背景以使其保持居中。然而,每次我调整窗口的大小来测试它时,图像会越来越多地向左移动。我尝试了其他代码,但它们最终缩小了背景。如果我在另一台计算机上查看我的页面,图像也会偏离中心。 :(

<style>
html, body {       
margin: 0px;    
background-color: #000000;
background-image: url('http://i.imgur.com/zwbnaPk.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>

无论窗口大小如何,我都希望它看起来像这样居中。虽然在这张照片中它有点偏离,但你明白我的意思。

http://i.stack.imgur.com/iN5BR.jpg

【问题讨论】:

  • 你的代码对我有用
  • 非常适合我。尝试清除缓存和历史记录(Chrome 中的 Ctrl + Shift + Del)。或按 Shift + F5。顺便说一句,您在 Chrome 中的 Gmail 帐户存在同步问题。
  • 我的 gmail 帐户与此有什么关系?

标签: html image background center centering


【解决方案1】:

首先...background 上的黑色中心部分不在中心,其次,您可以使用更少的 CSS 实现相同的结果

html,
body {    
  background: #000 url('http://i.imgur.com/zwbnaPk.jpg') center no-repeat;
  background-attachment: fixed;
  margin: 0;
}

【讨论】:

  • 感谢缩短版本。但这并不能解决我的问题。我在 Photoshop 上修复了图像,但是当页面左侧弹出广告时……它似乎改变了我的背景。 (vampirefreaks.com/cult/Upstate_and_Western_NY) 当广告没有出现时,它居中就好了。好奇怪……
猜你喜欢
  • 2012-03-23
  • 1970-01-01
  • 1970-01-01
  • 2018-07-11
  • 2019-06-23
  • 2014-03-30
  • 2012-07-26
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多