CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式，复杂的事情简单化，提高开发效率。
CSS Sprites将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。这样的话，当页面渲染时，可以减少请求次数，在一定程度上能够加快网页加载速度。
这并不是什么新鲜玩意了，但由于将小图整合到一张大图，又要准确的写出所需小图的background-position值，对于很多新手来说比较浪费时间，很多人只能放弃这个比较繁琐的步骤。
background-position 属性改变图像在背景中的位置：
基本用法
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top; // right 为正数 图片向右移 为负数 图片向左移 top同理
eg:
原始图片：
.pause{
width: 36px;
height: 36px;
background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") no-repeat;
}
.stop{
width: 36px;
height: 36px;
background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -36px 0px no-repeat;
}
.play{
width:36px;
height: 36px;
background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -75px 0 no-repeat;
}
效果：
