中心的背景图像是关闭的1px的

我的网页坐落在一个DIV即960像素宽，我通过使用代码中心这个DIV在页面中间：中心的背景图像是关闭的1px的

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;} 
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

我需要的背景图片html/body平铺在页面中间，但是如果浏览器中的可视窗格是奇数个像素宽度，那么居中的背景和居中的DIV不会对齐在一起。

这只发生在FF中。

有没有人知道解决方法？

来源

2008-09-22 cole

是的，这是已知的问题。不幸的是，您只能修复div和图像宽度，或者使用脚本动态更改stye.backgroundPosition属性。另一个技巧是将表达式放入CSS类定义中。

来源

2008-09-22 05:08:00 dimarzionist

FF @ fault？该死的......当我的伙伴失败时，我讨厌。 – mpen 2010-05-09 07:45:10

（最常见的）常见问题是您的背景图像有一个奇数，而您的容器是偶数。我写了一篇关于我在哪里可以解释浏览器如何定位图片的最佳英文文章：check it out here。

来源

2008-10-24 15:34:04

我发现通过在奇数像素宽的背景图像上，问题消失了Firefox。

设置填充：0px 0px 0px 1px;修复了IE的问题。

卡罗Capocasa，Travian游戏游戏

来源

2009-10-09 15:52:06 cmc

我能够用jQuery来解决此问题：

$(document).ready(function(){ 
$('body').css({ 
    'margin-left': $(document).width()%2 
}); 
});

来源

2011-01-20 13:06:09 Tom

我有同样的问题。

要获得背景为中心，您需要有一个背景图像比视口更宽。尝试使用背景宽度为2500px。它将强制浏览器将可见的图像部分居中。

让我知道它是否适合你。

来源

2012-05-23 18:09:14

这不是问题。问题是每个浏览器都有不同的将视口宽度四舍五入为整数的方式。某些浏览器使用天花板（次最高号码）或楼层（号码不含分数）。 – rxgx 2012-07-11 21:44:32

如何创建一个具有相同背景图像的包装div。

body{ background: url(your-image.jpg) no-repeat center top; } 
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

包装具有偶数，背景将保持在任何屏幕大小相同的位置。

来源

2013-06-22 19:18:26

中心的背景图像是关闭的1px的

回答

相关问题