rem布局缩放雪碧图（精灵图）

sprite图片的处理

为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。
比如有如下一张200*50的sprite图。

image

所以在处理sprite图片时，我们只能给background-size取具体值。那么这个值取多少呢？其实只要写我们切出来的图片的实际尺寸就行。

比如我们的元素为5050px，sprite图片为20050px，那css应该如下：

#cpt{
    width: 0.5rem; 
    height: 0.5rem;
    background-image: url(cpt.png);
    background-size: 2rem 0.5rem;
}

然后修改background-position我们就可以取到sprite上的其他图片了。background-position也取具体值，也是按照切出来的图的尺寸就行。