CSS sprite介绍

CSS sprite

俗称：精灵图，指将不同的图片/图标合并在一张图上；
使用CSS Sprite 可以减少网络请求，提高网页加载性能

示例：

精灵图图片合并网站CSS Sprites Generator
阿里字体图标库

1.在阿里图库下载相应图标，利用在线精灵图网站合并图片

css_sprites.png

2.此处合并图片利用上传地址为：https://upload-images.jianshu.io/upload_images/10871310-407e90cbc5bfbd2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

3.代码如下：

  
  
  

  
    日历
    

    天气      

4.页面展示效果为：

精灵图.png

这就是CSS sprite基本使用方式