CSS Sprite也叫CSS精灵图，或者CSS雪碧图，是一种网页图片应用处理方式。
它允许你讲一个页面涉及到的所有的小图标（或其他图）包含到一张大图。
当前的问题
虽然每个小图标或者小图片实际的大小并不会太大，但是每次页面打开，都需要先向服务器发出去一个请求，多次请求会消耗很大的性能，也是页面加载速度变慢的原因之一。
这样做的优点
- 减少图片字节数
- 减少网页的http请求，从而大大的提高页面的性能
原理
- 通过background-image 引入背景图片
- 通过background-position 把背景图片移动到自己需要的位置
实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./flags/spirit-cli/spirit.png.css">
<title>Document</title>
<style>
/* 同一张背景图，通过属性background-image和background-position来显示不同位置的图片 */
.icon1,
.icon2 {
display: block;
overflow: hidden;
background-image: url(./flags/spirit-cli/spirit.png);
width: 40px;
height: 30px;
border: 2px solid lightgray;
}
.icon1 {
background-position: -80px 60px;
}
.icon2 {
background-position: 0px 30px;
}
</style>
</head>
<body>
<div class="container">
<!-- 通过background-position定位显示不同的图标 -->
<div>
<h3>这是第一个图标</h3>
<i class="icon1"></i>
<div style="height: 64px;"></div>
<h3>这是第二个图标</h3>
<i class="icon2"></i>
</div>
</div>
</body>
</html>
参考文献
[1] 如何使用命令在线一键生成雪碧图及CSS样式， 点击查看
注意，图片格式最好调成png,命令运行也会帮转
[2] 如何批量修改图片宽高及格式。 点击查看
网上下载的flag可能尺寸格式都不统一，就可以用这个
标签：雪碧图,Sprite,image,background,position,CSS,页面 From： https://blog.51cto.com/u_15525868/5780526