CSS sprite
俗称：精灵图，指将不同的图片/图标合并在一张图上；
使用CSS Sprite 可以减少网络请求，提高网页加载性能
示例：
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
