精灵技术

精灵技术

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

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

为什么使用精灵图?

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

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

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

    精灵图制作、使用

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


```