认识精灵图

什么是CSS Sprite

• 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
• 有人翻译为：CSS雪碧、CSS精灵

使用CSS Sprite的好处

• 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
• 减小图片总大小
• 解决了图片命名的困扰，只需要针对一张集合的图片命名

Sprite图片制作（雪碧图、精灵图）

• 方法1：Photoshop, 设计人员提供
• 方法2：https://www.toptal.com/developers/css/sprite-generator

精灵图的使用

精灵图如何使用

• 精灵图的原理是通过只显示图片的很小一部分来展示的
• 通常使用背景
  ✓ 1.设置对应元素的宽度和高度
  ✓ 2.设置精灵图作为背景图片
  ✓ 3.调整背景图片的位置来展示

如何获取精灵图的位置

• http://www.spritecow.com/