#大有学问# #头条创作挑战赛#

精灵图

作用：可以有效减少服务器接收和发送请求的次数，提高了页面的加载速度。

用法：将多个小背景图标整合在一张大的图片中，通过background-position属性移动大图片的位置来显示所需小图标。

需要测量的两个数值

1. 小图标的宽和高；
2. 小图标距离大图片左上角的x轴和y轴的值。（其中x轴是大图片上边框，y轴是大图片的左边框）

小贴士：

一般情况下精灵图的移动数值都是负值。

需要说明的一点时，网页中x轴起点一般在左上角，y轴垂直于x轴向下延伸。

x轴：越往右，数值越大；越往左，数值越小且为负数。

y轴：越往下，数值越大；越往上，数值越小且为负数。

<style>
div {
  background: url(../images/sprites.png) no-repeat;
}
.box1 {
  /* 在背景图片中所需小图标的宽高值 */
  width: 60px;
  height: 60px;
  margin: 100px auto;
  /* 这对数值是小图标在大图片中所处位置。
 图片的上边框当做x轴，左边框为y轴。
 测量好小图标的位置之后，需要大图片向左上角移动相应的数值。
 因此x轴方向数值即为负值。
 所以需将背景图片向左移动182px，y轴方向保持不动 */
  background-position: -182px 0;
  /* 简写 */
  /* background:url(../images/sprites.png) no-repeat -182px 0; */
}
.box2 {
  width: 27px;
  height: 27px;
  margin: 150px auto;
  background-position: -155px -106px;
}
</style>

<div class="box1"></div>
<div class="box2"></div>

精灵图小案例

随便从网上找一张图片作为精灵图的大图片。

<style>
* {
  margin: 0;
  padding: 0;
}
span {
  display: block;
  float: left;
  margin: 100px 0;
  width: 200px;
  height: 200px;
  background: url(../images/spritesDemo.jpg) no-repeat;
}
.h {
  width: 214px;
  height: 212px;
  background-position: -466px -352px;
}
.t {
  width: 214px;
  height: 220px;
  background-position: -482px -796px;
}
.m {
  width: 278px;
  height: 216px;
  background-position: -196px -572px;
}
.l {
  width: 196px;
  height: 212px;
  background-position: -1285px -352px;
}
</style>

<div>
  <span class="h"></span>
  <span class="t"></span>
  <span class="m"></span>
  <span class="l"></span>
</div>

下次见~