如何居中背景div？

Question

我想要什么

两个div：页面正文（1）和背景块（2）

• 背景块始终为（2560 x 780）px
• 页面正文宽度为820px，高度可变
• 后台阻止应位于页面正文
之后
• 背景块和页面正文都应居中
调整窗口大小时，
• 背景块不应相对于页面主体移动（即使是1个像素！）
• 背景块
不应出现水平滚动条
• 后台阻止位置未修复

约束

• 没有JS
• CSS2首选

我尝试了什么

页面正文CSS：

#pageBody {
    width: 820px;
    margin: 0 auto;
}

后台块CSS：

1。一个整页div，显示以CSS为中心的背景

<div id="backgroundBlock"></div>
<div id="pageBody">
</div>

#backgroundBlock {
    background: no-repeat center 0 url(bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
}

但是当窗口的大小是奇数时：

• CSS背景在左侧移动了1个像素
• 背景图片在Internet Explorer上显得模糊

2。重新定位的子div

• 使背景块成为页面正文（以居中为中心）的孩子
• 将背景块置于绝对位置（将其置于页面正文之后）
• 使用负边距重新定位背景块
• 使后台阻止溢出：隐藏以防止该div显示滚动条

<div id="pageBody">
    <div id="backgroundBlock"></div>
</div>

#backgroundBlock {
    background: no-repeat url(bg.png);
    width: 2560px;
    height: 780px;
    position: absolute;
    margin: 0 0 0 -870px;
    overflow: hidden;
}

但问题：背景块 ...

的滚动条显示

Answer 1

以下是我能想到的一些想法，以及他们的问题。但是，我无法重现“IE中的模糊”问题，所以我不知道是哪种解决方案 我确实将“额外标记”作为解决方案的问题，包括仅用于显示背景图像的div（#backgroundBlock），因为它不是语义。

---

解决方案1（jsfiddle）

• 说明：您的第一个解决方案
• 问题：
  • 额外加价
  • 在Chrome上，根据页面大小，像素可以不同方式对齐。您可以在右边框附近的jsfiddle上看到它：

---

解决方案2（jsfiddle）

• 说明：正文上有多个背景。 <{1}} div不需要。

  #backgroundBlock

• 问题：

  • 与旧版浏览器不兼容（IE8，FF3.5，...; source）
  • 在Chrome上，与解决方案1 ​​
  中的对齐问题相同

---

解决方案3（jsfiddle）

• 说明：使用body { background: no-repeat center top url(bg.png), url(bodybg.png); } 。不再有像素对齐错误。

  translate

• 问题：

  • 额外加价
  • 您必须在#backgroundBlock { background: url(bg.png); width: 2560px; height: 780px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); } 上使用overflow-x: hidden以避免水平滚动条
  • 与旧浏览器不兼容（IE8，FF3，...; source）。您还应该使用前缀来实现兼容性（body，-webkit-，...）。我没有添加它们以保持示例简单

---

解决方案4（jsfiddle）

• 说明：使用-moz-和translate。替代版本的解决方案3 。由于每个支持2D转换的浏览器都支持::before（source），因此伪元素兼容性不是问题。

  ::before

• 问题：

  • 额外加价
  • 与旧浏览器不兼容（IE8，FF3，...; source）。您还应该使用前缀来实现兼容性（#backgroundBlock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #backgroundBlock:before { content: ''; background: url(bg.png); width: 2560px; height: 780px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); } ，-webkit-，...）。我没有添加它们以保持示例简单

---

还有其他可能性，但我认为其中大多数都会遇到上述问题之一 例如，您可以将-moz-宽度设置为2560px，在其上设置背景，添加填充以使内容大小为820px并使其#pageBody以使其在页面上居中（并防止在translate上使用overflow-x的水平滚动条。这是可能的，因为背景图像和页面主体都有固定的宽度。