理解background-position百分比定位

因为本人不爱用雪碧图，平时background-position用的并不多，一直以为百分比定位和像素定位是一样的逻辑原理，按容器像素换算百分比就可以了呀！呸，傻子！css的法则在脸上胡乱的拍，啪啪啪~！！
痛过之后，有了以下理解：

像素与百分比换算

对于background-position的百分比值，我们最容易理解的是以下的情况：

这种情况乍一看，好像又简单又合情合理，但是，我们思考一下，（0%，0%）位置的时候，背景图的定位点在哪？图片左上角！（100%，100%）位置的时候，背景图的定位点又在哪？图片右下角！
看出问题了吗，按像素定位的逻辑，背景图的定位点一直都在图片左上角，而百分比定位到底是怎么回事？（100%，100%）位置应该已经在容器外了，为什么还在容器里面？
“失去了参考点，我们很慌呀！”
来，别慌，我们用公式来解决：

水平像素 = (容器宽度-背景图片宽度)*水平百分比
垂直像素 = (容器高度-背景图片高度)*垂直百分比

水平百分比 = 水平像素/(容器宽度-背景图片宽度)
垂直百分比 = 水平像素/(容器高度-背景图片高度)

背景图小于容器的情况

在我们确定像素值的情况下，我们用公式换算就OjbK了，但如果我们必须直接用百分比的时候该怎么估值？从平面图形上怎么理解百分比值呢？来，看下图：

以背景图片左上角为定位点，按照（0%，0%）和（100%，100%）两个位置的背景图片的左上角进行连线，我们抽象出一个以百分比为值的平面直角坐标系，这个时候我们就很好理解大于100%和小于0%的位置在哪里了。

背景图大于容器的情况

还有一种使人懵逼的状态，就是当背景图片尺寸大于容器尺寸的时候。通常我们的定位值由左至右、由上至下递增，在背景图片小于容器的时候，按这个逻辑是没问题的。但是一旦背景图片大于容器，这一条就不成立了，原因在于坐标系的增值方向改变了，如下：

“那个灰边小框框是容器，粉色大块块是背景图片，右下两个粉块块太大已超过画幅，咱们自行想象一下。”
上图中，负值越小越往右下方向移动，这和我们以往的思路是不一致的，这都是背景图片和容器大小关系决定的。

简单粗暴的应用

好了，道理讲清楚了，具体应用我们可以遵循一条简单的思路：以（0%，0%）位置背景图左上角为起点（同时也是容器的左上角），以（100%，100%）位置背景图左上角为终点，画一条直线，数值根据线条的方向递增，自己想要什么样的位置就可以大概估摸出来了。

以上分别是图片的宽高分别大于小于容器宽高的四种情况，延长线自行想象，坐标系意念铺开，增幅自行估摸，你会找到你要的点。

以上~