网站背景图片模糊，快看下是不是图片尺寸偶数造成的

今天碰到一个技术问题，我们做了一个图片演示，宽度是1920像素，作为body的背景图，发现一个奇怪的现象：图片清晰，但放到网页上却很模糊。于是查看原因，发现去掉背景图片的background-position:center 0；图片就变清晰了。

问题是，图片必须要居中，作为背景图。

于是尝了一个一个特殊的办法：

把1920px宽度的图画布扩大的1921px，成功了！

为什么会出现这样的现象呢？

猜测是因为浏览器进行居中对齐的过程中，必须选一个整数的左右边距，如果是偶数，中心点需要是在第959和第960个点之间，那么浏览器就会自动给图片缩小成1919像素或者1921像素。

这样才有一个确定的像素点在中线上。

这样说可能有点难懂，我们来举个例子，比3像素和4像素的区别：

一、3像素宽度的图形中间点就是第二个像素点

这样的居中就是第二个像素点在中线上。于是可以很清晰。

二、4像素宽度的图形中心点，是在第2~3像素之间

这样，浏览器或者电脑的某种原理，需要给图片压缩到3像素，然后找中心点，对应某一个像素点。这样就引起模糊了。

但无论如何，有一个经验，那就是背景图片居中的情况下，宽度需要是奇数，这样可以减少模糊的发生概率。对于有时候文字的模糊等等，大家也可以参照奇数、偶数的方式去修正看看效果。