以下是我能想到的一些想法,以及他们的问题.但是,我无法重现“IE中的模糊”问题,所以我不知道哪个解决方案有或没有.
我确实把“额外标记”作为解决方案的问题,包括仅用于显示背景图像的div(#backgroundBlock),因为它不是语义的.
>描述：您的第一个解决方案
>问题：
>额外加价
>在Chrome上,根据页面大小,像素可以不同方式对齐.您可以在右边框附近的jsfiddle上看到它：
>描述：身体上有多个背景.不需要#backgroundBlock div.
body {
background: no-repeat center top url(bg.png), url(bodybg.png);
}
>问题：
>与旧浏览器不兼容(IE8,FF3.5,…; source)
>在Chrome上,与解决方案1中的对齐问题相同
>描述：使用翻译.不再有像素对齐错误.
#backgroundBlock
{
background: url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
>问题：
>额外加价
>你必须使用overflow-x：隐藏在body上以避免水平滚动条
>与旧浏览器不兼容(IE8,FF3,…; source).您还应该使用前缀来实现兼容性(-webkit-, – emz – ,…).我没有添加它们以保持示例简单
>描述：使用translate和:: before.解决方案的替代版本3.伪元素兼容性在这里不是问题,因为支持2D转换的每个浏览器都支持::之前(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);
}
>问题：
>额外加价
>与旧浏览器不兼容(IE8,FF3,…; source).您还应该使用前缀来实现兼容性(-webkit-, – emz – ,…).我没有添加它们以保持示例简单
还有其他可能性,但我认为其中大多数都会遇到上述问题之一.例如,您可以将#pageBody宽度设置为2560px,在其上设置背景,添加填充以使内容大小为820px并翻译它以使其在页面上居中(并防止使用overflow-x的水平滚动条身体).这是可能的,因为背景图像和页面主体都具有固定的宽度.
