如何将背景显示器对中？

Question

我想要什么

两个div :页面正文(1)和背景块(2)

• 背景块总是(2560x780) px。
• 页体宽度为820 is，而高度是可变的。
• 后台块应该在页面正文后面。
• 背景块和页体都应居中。
• 当调整窗口大小时，背景块不应该相对移动到页面主体(甚至是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 (小提琴)

• Description：您的第一个解决方案
• 问题：
  • 额外标记
  • 在Chrome上，取决于页面大小，像素可以不同地对齐。你可以在右边边框附近的小提琴上看到它：

​

​

解决方案2 (小提琴)

• 描述：身体上的多个背景。不需要#backgroundBlock div。 主体{背景:不重复中心顶部url(bg.png)，url(bodybg.png)；}
• 发布：

- Not compatible with old browsers (IE8, FF3.5, ... ; [source](http://caniuse.com/#feat=multibackgrounds))
- On Chrome, same alignment problem as in _solution 1_

​

解决方案3 (小提琴)

• Description：translate的使用。不再有像素对齐错误。 #背景块{背景: url(bg.png)；宽度:2560 50；高度:780 50；位置:绝对；顶部: 0；左: 50%；转换:转换(-50%，0)；}
• 发布：

- Extra markup
- You have to use `overflow-x: hidden` on `body` to avoid horizontal scrollbar
- Not compatible with old browsers (IE8, FF3, ... ; [source](http://caniuse.com/#feat=transforms2d)). You should also use prefixes for compatibility (`-webkit-`, `-moz-`, ...). I did not add them to keep the example simple

​

解决方案4 (小提琴)

• Description：translate和::before的使用。伪元素兼容性不是一个问题，因为每个支持2D转换的浏览器都支持::before (来源)。 #背景块{位置:绝对；顶部: 0；左: 0；宽度: 100%；高度: 100%；溢出:隐藏；}#背景块:在{ content：‘之前；背景: url(bg.png)；宽度:2560 50；高度:780 50；位置:绝对；顶部: 0；左: 50%；转换:转换:转换(-50%，0)；}
• 发布：

- Extra markup
- Not compatible with old browsers (IE8, FF3, ... ; [source](http://caniuse.com/#feat=transforms2d)). You should also use prefixes for compatibility (`-webkit-`, `-moz-`, ...). I did not add them to keep the example simple

​

还有其他的可能性，但我认为其中大多数都会有上述问题之一。

例如，您可以将#pageBody宽度设置为2560 in，设置其上的背景，添加填充以使内容大小为820 in，并将其设置为translate，以便使其以页面为中心(并防止使用overflow-x on body的水平滚动条)。这是可能的，因为背景图像和页面正文都有固定的宽度。