CSS中使用雪碧图

在线制作雪碧图的工具：
https://www.toptal.com/developers/css/sprite-generator
使用雪碧图时需要对某段图片进行缩放时，通过background-size属性进行缩放，宽度和高度缩放的方式相同，以宽度为例：

background-size 的宽度值 = (雪碧图总宽度 * 目标图像宽度) /雪碧图中高分辨率图像宽度

比如，我们上面的问题。
我制作的雪碧图中的图标是高分辨率下的50px * 50px；
网页中需要展示的目标图标是35px * 35px；
制作的雪碧图的总宽度是300px；
根据上面的公式 background-size 的宽度值 = (300 * 35)/50 = 210;

.sprite{
  background: url('../../../static/dragComponentSprite.png') -15px -60px no-repeat;
  background-size: 210px auto; 
}

上面的-15px和-60px表示雪碧图根据实际页面尺寸移动的距离，而不是雪碧图的实际距离移动的。