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;
}

效果：