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.代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>精灵图</title>
  <style>

      span {
          width: 220px;
          height: 220px;
          border: none ;
          background: transparent url(https://upload-images.jianshu.io/upload_images/10871310-407e90cbc5bfbd2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat;
          display: inline-block;
      }

      .calendar {
        background-position: 0 0;
      }

      .weather {
        background-position: -220px 0;
      }
  </style>
</head>
<body>  
    <span class="icon calendar">日历</span>
    </br>
    <span class="icon weather">天气</span>      
</body>
</html>

4.页面展示效果为：

精灵图.png

CSS sprite介绍

CSS sprite介绍

CSS sprite

示例：

这就是CSS sprite基本使用方式

推荐阅读更多精彩内容