共计 1232 个字符，预计需要花费 4 分钟才能阅读完成。
雪碧图是把各种小图标汇合在一起的 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;
}
这样就能指定展现想要的图标了