雪碧图是把各种小图标汇合在一起的png图片，通过background-position来展现雪碧图中不同地位的小图标，比方以下图片，在我的项目中要用到的小图标很多，如果每一个图标都作为一个png或者jpg图片，这样会减少十分多的网络申请，所以把很多小图片组合在一起是一个很不错的抉择。
比方下图
在用background-position来展现雪碧图之前，须要能纯熟使用background(背景)属性，这里先简略介绍一下background如何应用。
background有十分多的属性，能够设置背景色彩、背景图片，而图片又能抉择是否反复，以及摆放在哪个地位。
最简略的就是应用background-color设置背景色彩了，能够设置预约义的色彩，如：pink/red/blue/black，能够设置16进制色彩，如#000000，还能够设置rgb色彩，如rbg(0,0,0)，还能够在此基础上减少透明度 rgba(0, 0, 0, .5)，须要留神的是，透明度仅作用于背景，不影响盒子的其它内容，演示如下
当背景须要通过简单的图案来进行填充时，咱们能够借助于背景图片，应用background-image通过url来定义背景图片，比方设置一个小女孩的头像为背景
能够发现，背景图在盒子内被平铺了，这就是背景的第三个属性，background-repeat 当不设置的时候，默认是反复（repeat），须要定义为不平铺时，设置no-repeat即可
咱们发现背景图片默认会在盒子的左上角，如果想要调整背景图片的显示地位，比拟常见的状况是，应用背景图片和文字配合显示，文字和背景图片都须要居中显示，那此时就须要用到 background-position，能够应用方位名词，x轴应用top/center/bottom，y轴应用left/center/right，也能够通过百分比/像素来对背景图片进行挪动，如果只写了一个方向的挪动形式，那么另一个就默认为center。
以上属性能够合并在一起写
background: 色彩 图片 是否重叠 地位// 以上居中显示 background: #000 url(./girl.png) no-repeat center雪碧图的展现就是通过像素来对图片进行挪动，比方下面的雪碧图中，选取耳机这个小图标来进行展现，在photoshop里关上雪碧图，应用矩形工具框出须要展现的图片，此时会展现属性信息，将这些属性别离设置到css款式中
下面选取的戴着耳机的小图标的宽度为65px，高度为50px，x轴的偏移量为0px，y轴的偏移量为80px，要留神的是，x轴和y轴的偏移量在定位时要取负值，因为找到小图标的地位之后，相当于要将整个雪碧图往上往左移，使得小图标的地位正好在原点处
.icon { width: 65px; height: 50px; background: url(./res/sprite.png) no-repeat 0px -80px;}这样就能指定展现想要的图标了