【css】background-position陷阱与移动端雪碧图处理
前言：大家肯定都试过给元素添加背景background，并且用的绝对不少，但是其中的background-position，你真的了解吗？
我们往往要把页面的中的众多图标合并成一张雪碧图，已减少对服务器的图片请求次数。pc端处理雪碧图是很好处理，但是移动端如果不熟悉background-size跟background-position，处理起来还是有很大麻烦的。
一、例子①
测试图片：
运行结果：
这个毫无问题，第一个是用测试图片做的背景图，而第二个是用div进行定位的。.child的top跟left都是20px;
二、例子②
让背景图的position为20% 30%
运行结果：
问题出现了。background-position:20% 20%;设置的背景图片，水平垂直居中了。而box2中的div定位是top:20%； left:20%; 效果上出现了很大差异。
三、问题原因
①上个例子中的box2 下div的postion定位的值为百分比，是根据父级的宽度高度来计算的。
box2的宽度为200px, child的left为20%； 既转化为200*20%=40px;
box2的高度为200px, child的top为50%； 既转化为200*30%=60px;
②background-position的百分比计算就大大的不同了，他是用
水平偏移量 = （容器的宽度 - 图片宽度）*百分比
垂直偏移量 = （容器的高度 - 图片高度）*百分比
即上面例子中的
水平偏移量 = （200 - 100）*20% = 20px;
垂直偏移量 = （200 - 100）*30% = 30px;
所以在使用百分比的时候要特别小心这问题，特别是处理移动端的雪碧图的时候。
四、pc端雪碧图处理
测试图片：四个长宽为100px的小方块
测试代码：四个长宽为100px，margin-right为10px 的小div块。
①（background-position:的值为非百分比的时候）
运行结果：
这样，就通过雪碧图，给不同的div块添加了不同的背景啦。而我们要做的是，就是给背景图添加水平方向的偏移量就可以了。
②（background-position:的值为百分比的时候）
因为div容器为100px，而背景图的大小为400*100；（即设置百分比的时候只需（100-400）*%）
-100/（100-400） = 33.33%
-200/（100-400） = 66.67%
-300/（100-400） = 100%
运行结果：
这样就可以实现一样的效果了。
五、移动端雪碧图处理
测试图片：（四个长宽为48px的小图标）
处理过移动端的雪碧图的都知道，因为容器的宽度高度是自适应的或者是响应式的。如果不设置background-size:图片会出现溢出的情况。
例如:
background-size:该怎么去设置呢？
如例子中的测试图片。因为测试图片的长宽为192*48，那我们直接用rem设置background-size:就好了。
background-size:1.92rem auto; 图片高度让他根据宽度自适应就好了。
因为容器的宽度为48px; 也可以直接用百分比给宽度设值。background-size:400% auto;
如果对rem，移动度自适应不熟悉的建议看下我以前的文章【css】移动端自适应布局与字体大小自适应
①（background-position:的值为非百分比的时候）
移动端处理雪碧图
这样就可以实现，背景图也跟着容器自适应了。这里的偏移值也要用rem去设置。
②（background-position:的值为百分比的时候）
因为div容器为48px，而背景图的大小为192*48；（即设置百分比的时候只需（48-192）*%）
-48/（48-192）= 33.33%
-92/（48-192） = 66.67%
-144/（48-192）= 100%
.content div:nth-of-type(1) { background-position:0 0; }
.content div:nth-of-type(2) { background-position:33.33% 0; }
.content div:nth-of-type(3) { background-position:66.67% 0; }
.content div:nth-of-type(4) { background-position:100% 0; }