三、自适应雪碧图

用雪碧图做精灵动画会有一个问题：
必须通过绝对尺寸获取图片坐标，否则就会出错，大多情况下可能会准备2套图片,如果不这样做，在分辨率缩放的情况下，精灵图就显得不对称了。
针对这样的情况，有2种方案可以解决，一种是基于CSS3的scale处理直接可以让元素缩放，另一种就是通过background-size背景图让精灵图实现自适应缩放。
背景图自适应方案：

上图是4*1矩阵图片，一般想让背景图填充整个元素在css3中可以通过background-size:100% 100%处理，但是使用雪碧图显然不想让整图去填充元素，
如何让单图填充一个元素呢?
我们可以把整图整体缩放，横竖按照矩形的数量比缩放100%。按照矩形的排列整体缩放背景图：
background-size: 400% 100%;
这才是最关键的一步，这样单个元素显示一张图，到了这一步估计大家都猜出来了，很简单了，通过百分比去取图了
接下来，我们可以很愉快的去改造精灵动画

  
    
    
  
  



  
 尺寸增加后，精灵图正常