CSS雪碧图

CSS雪碧图（Sprite）也叫CSS精灵， 是一CSS图像合成技术。
能有效的减少Http的请求数量，加速内容显示

---

实现原理

把多张小图合并成一张雪碧图，利用CSS的四个属性(background-image，background-position，width，height)来控制显示范围大小，把所需部分显示出来。

---

适合图片类型

1.静态图片，不随用户信息的变化而变化
2.小图片，图片容量比较小
3.加载量大

不适合图片类型
大图

---

雪碧图实现：CSS Gaga

1.下载安装CSS Gaga(暂不支持Mac)

2.选中“图片合成”菜单后， 将小图标拖入软件首页即可生成对应的雪碧图以及 CSS Sprite 代码

3.根据上述生成的雪碧图以及对应图标位置，编写CSS:

.wrap .icon1,
.wrap .icon2,
.wrap .icon3,
.wrap .icon4{
  width:54px;
  height:54px;
  background:url("../images/CssGaga.png");
}

.wrap .icon1{ background-position:   0px   0px; }
.wrap .icon2{ background-position: -30px   0px; }
.wrap .icon3{ background-position:   0px -30px; }
.wrap .icon4{ background-position: -30px -30px; }

4.存在问题:
①只支持windows操作系统，对于很多mac开发的人而言不友好
②多人维护雪碧图时，沟通成本较高(得确认新的雪碧图中旧小图标位置是否有变化)

---