---

background-position 里边用百分比的奇葩问题。

做 CSS雪碧图（ CSS Sprite ）会用到 background-position 。一般都是直接用 px 来计算。 最近看到 webket.org 官网里边的 SVG Sprite 用的是百分比，很是有趣，就实践一下。

首先的看看通过 px 像素定位的背景。和中小学学习的坐标系略有不同，是从左上角开始计算的。左上是正数，右下是负数。

然后 background-position 后面就是分别代表着横坐标和纵坐标。

比如说做好一张图片，分成八块，分别用 A - G 代表，每一块宽 20px 高 15px，可以很快推算出来每一个的坐标。

到 CSS Sprite 用百分比计算的时候，要利用 SVG 无限缩放的矢量特性，通常将其排列成一行或者一列。然后将 background-size 其中的一个设置为 100% 或者直接写 cover。

比如说竖着的 A B C D 四块，会想当然的以为是 100% 平分为四块，即每一个都是 25%，然后 Y 坐标分别是 0% 25% 50% 75% ？其实不是这样的。

不知道是不是为了充分利用 100% 这个数值，当需要分成四块，实际上每一块的高度是 四减一之差 分之一，即 1 / ( n - 1 ) ，坐标分别是 0% 33.33% 66.66% 100% 。 可以用 calc 计算出百分比。