背景定位

关于background-position的工作原理，我的理解是将图片上需要显示出来的区域相对于元素的左上角，也就是坐标点（0,0）进行水平和垂直方向偏移。

总的来说，background-position的参数设定方式是从简单到复杂：

1. 使用语义明确的单词
   水平方向：左（left），中(center)，右(right)
   垂直方向：上（top），中(center)，下(bottom)
   很明显，这种方式言简意赅，使用简洁而语义明确。

2. 如果您仅规定了一个关键词，那么第二个值将是"center"。

   默认值：0% 0%。

3. 第一个值是水平位置，第二个值是垂直位置。

   左上角是 0% 0%。右下角是 100% 100%。

   如果您仅规定了一个值，另一个值将是 50%。

   
   background-position: top center; // 从图片顶部开始，居中显示
   background-position: top left; // 从图片顶部，靠左开始显示（左上角）
   background-position: top right; // 从图片顶部，靠右开始显示（右上角）
   background-position: bottom left; // 从图片底部，靠左开始显示（左下角）
   background-position: bottom right; // 从图片底部，靠右开始显示（右下角）
   
   采用这种方式来显示图片，一般情况是为了显示整个图片文件上的内容，比如页面的背景图，换句话说，图片文件上就只有一个图像需要显示，然后使用这种方式来进行大概的定位操作，比如需要居中的将背景图片显示出来。
   
   
4. 数值用法
   这是一种对图片上需要显示的区域进行精确定位方法，用来实现CSS Sprites（详见W3Cschool）。
   CSS Sprites就是将需要显示的多个图像排列到一个图片文件上，这样做的好处是可以减少图片数量，也就减少了HTTP请求次数，从而优化了网站的性能。一般来说，网站常用的图像资源，比如button，logo，icon都可以放到一张图片上。
   举个例子，我们现在有一张图包含了很多icon，现在想要显示红色P那个icon，如图已经测量出红色P距离上边界和左边界的距离。
   
   使用如下的设定，
   
   ?

   1 2 3 4 5 6

   .icon {     width: 125px; // 首先创建一个长宽为125px的容器元素     height: 125px;     background-image: url(‘../assets/images/icon_sprites.png‘); // 设置这个元素的背景图片     background-position: -128px -384px; // 设置偏移量 }

   就可以显示出红色P了。
   
   
   很神奇吧，我们可以这样理解，刚创建的容器元素是一个从这张图片（0,0）坐标开始的一个相框，这个相框的大小是固定的125px，所以如果不设置background-position，也就是不设置任何偏移，看到的就是左上角那个icon。
   
   所以图片需要向上384px,向左128px才能移动到红色P的位置。
   
   可是为什么设的是负值呢？
   这是因为HTML里的X轴向右是正值，Y轴向下是正值！
   
   而刚才我们的图片需要向左向上移动，正好在两个维度都需要反向移动，所以为负值。
   
   这个方式是不是很有用？通过设置偏移数值就能找到图片上需要显示的区域。
   注意，这个方式存在一个问题，因为设定的偏移值都是固定的，导致没法做到图像自适应。我们在实现实现响应式设计时，图片的大小会根据浏览器视口的大小进行缩放调整，而图片的大小改变之后，偏移位置就需要改变，换句话说，图片大小一调整，我们想要显示的图像的位置在数值上也会改变。为解决这个问题，我们得用百分比的方式。

5. 百分比用法
   之所以百分比能解决上面的问题，因为它是一种表示相对偏移的方式，只要图片等比缩放，图像的相对位置是不变的。
   其实百分比用法和数值用法很类似，都需要先测量想要显示的那块图像距离上边界和左边界的距离，另外还要测量整张图片的高和宽。
   还是以上面的图片为例，它的宽（X轴）是381px，高（Y轴）是509px，红色P的X轴偏移值是128px，Y轴偏移值是384px，红色P是长度为125px的正方形。
   看到这里心想X轴的百分比偏移量就是 128px/381px ≈ 33.5958%，Y轴 384px/509px ≈ 75.442%，然后设置background-position: 33.5958% 75.442%; 
   
   
   实际上，经过实践发现，它用的另一个公式来计算
   X轴百分比：X轴偏移值 / (图片宽度 - 要显示图像的宽度) * 100
   Y轴百分比：Y轴偏移值 / (图片高度 - 要显示图像的高度) * 100
   应用到例子：X轴为128px / (381px - 125px) = 0.5，Y轴384px / (509px - 125px) = 1，因此结果就是50%和100%