sprite图片是组合各种小图标的png图片，通过background-position在sprite图片中的不同位置显示小图标，比如下图，在project中有很多小图标。如果每个icon都做成png或者jpg图片，会增加很多网络请求，所以把很多小图组合起来是一个很好的选择。例如，在使用background-position显示下图中的Sprite图片之前，你需要能够熟练使用background（背景）属性。下面简单介绍一下后台的使用方法。background有很多属性，可以设置背景颜色，背景图片，图片可以选择是否重复，放在哪里。最简单的就是使用background-color来设置背景色。可以设置预定义颜色，比如：pink/red/blue/black，可以设置十六进制颜色，比如#000000，也可以设置rgb颜色，比如rbg(0,0,0)，也可以在此基础上增加透明度rgba(0,0,0,.5)，需要注意的是透明度只作用于背景，不影响盒子的其他内容，演示如下当背景需要时填充复杂的图案，我们可以使用背景图片，通过url定义背景图片。比如你设置一个小女孩的头像作为背景，你会发现背景图片是平铺在方框里的。这是背景的第三个属性。不设置background-repeat时，默认为repeat（重复）。当需要定义为不平铺时，设置no-repeat。我们发现背景图片默认会在框的左上角。如果要调整背景图的显示位置，比较常见的情况是背景图和文字一起显示。文字和背景图片都需要居中显示，那么这时候就需要使用background-position，可以使用orientation名词，x轴使用top/center/bottom，使用left/center/right对于y轴，您还可以按百分比/像素移动背景图像。如果只写了一个移动方向，另一个将默认为居中。以上属性可以组合在一起写background:colorimage是否重叠位置//以上是居中显示background:#000url(./girl.png)no-repeatcentersprite图片的显示是为了通过像素移动图片，如上图精灵图片中，选择耳机小图标显示，在photoshop中打开精灵图片，用矩形工具框住要显示的图片。这时候会显示属性信息，这些属性分别设置为上面在css样式中选择的戴耳机小图标的宽度为65px，高度为50px，x轴的偏移量为0px,y轴偏移量为80px。需要注意的是，定位时确定x轴和y轴的偏移量取负值，因为找到小图标的位置后，相当于把整个精灵图往左上移动，这样小图标的位置就正好在原点。图标{宽度：65px；高度：50px；background:url(./res/sprite.png)no-repeat0px-80px;}这样就可以指定要显示的图标
