CSS Sprite简介

是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分。

也翻译成雪碧图

CSS Sprite的优点

  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
  • 减小图片总大小

CSS Sprite使用方法

  • 1.设置对应元素的宽度和高度
  • 2.设置精灵图作为背景图片
  • 3.调整背景图片的位置来展示

CSS Sprite图片制作

https://www.toptal.com/developers/css/sprite-generator

CSS Sprite位置获取

http://www.spritecow.com/