CSS：将元素宽度限制为偶数

Question

我很想知道：我在一个我正在研究的网站上有一个背景图片需要非常精确定位。目前，其定位是：

 body {
    ...
    width: 100%
background-position-x: center;
background-position-y: -10px;
 }

这非常有效 - 大多数情况下，当用户调整窗口大小时，图像会保持在x轴的中心位置。

但是，如果用户将窗口大小调整为奇​​数像素宽度（即正文变为1001像素而不是1000像素），那么背景图像似乎位置偏离一点（可能是1像素？）。

我该如何解决这个问题？我是否必须将元素宽度限制为偶数/我该怎么做？可能有一个jQuery解决方案吗？

编辑：名为Simplegeo https://simplegeo.com/的网站设法完美地完成了这项工作。注意平铺的背景：它是用重复的png文件制作的，它始终完美地定位在页面上的元素上。这表明它有可能......但有人知道他们是怎么做到的吗？

Answer 1

我看到它的方式，你有两个选择：

1）调整用户窗口的大小，直到最接近的偶数（发生调整大小时），如http://jsfiddle.net/hATKW/

2）使用固定宽度和媒体查询来计算多个大小的窗口，请在此处阅读媒体查询：http://css-tricks.com/6731-css-media-queries/

谢谢， 利奥

Answer 2

本网站使用的背景图像为20x20像素（偶数）。你可以使用

body {
min-width:400px;
}

在此宽度下，1px关闭将难以检测到，如果用户重新调整到更大的窗口，差异将难以察觉。

我对你的问题不太确定。你在谈论问题中的元素，而不是背景。如果您提供站点链接会很有帮助。