background-position属性的百分比用法

以前使用background-position时常常用具体像素值做为参数，好比
background-position：20px 30px。
这种用法的效果很简单，就是背景图的左上角定点距离容器左边20px，距离上边30px，也就是背景图向右边移动20px，向下边移动30px。
可是，若是用%时就不能这样想了，或者说，不彻底是这样。先来举几个。

background-position：0% 0%；

background-position：100% 100%；

background-position：50% 50%；

如何照本来的思想，background-position：50% 50%；不该该是背景图的左上角定点距离包裹元素左上角向右向下偏移50%距离吗？这样想就错了，其实是，包裹元素的尺寸减掉背景图片的尺寸做为基数进行偏移，而不是以包裹元素的宽高做为基数偏移。

background-position：50% 50%解释：假设包裹层宽度300px，背景图宽度200px，则第一个50%实际上对应偏移像素值为（300px - 200px）*50%。显然，这样就是居中显示了。

同理，background-position：100% 100%，去掉背景图原始尺寸后，剩下的空余部分所有偏移了，固然是跑到右下角了。

总结：就一句话，不是以包裹层宽高做为基数进行偏移，而是剩余宽高做为基数进行偏移的！