精灵技术

精灵技术

精灵图 -n通过精灵技术，将网站中的小图标整合到一张大的图片中，这张大图片就叫精灵图。

精灵技术 -n精灵技术就是制作好精灵图，利用css背景属性background-position精准定位，将需要的icon显示出来。
关键点精灵图一般用在icons上。因为icons图片不会经常变更。而产品图片需要与用户交互动态请求服务器，更换图片。

为什么使用精灵图？

icon小图片很多，会增加http请求。使用精灵图有效减小http请求，从而提高页面加载速度。

缺点解决：遇到简单的图标，可以使用字体图标。但是复杂的小图标还是用精灵图。

• 更换、图片的缩放调整很不方便。

• 图片的缩放会失真。

  精灵图制作、使用

  工具雪碧图在线生成网站
  例子 ```html