1 概念

CSS-sprites，又叫精灵图，也是CSS图像拼合或者CSS贴图定位

2 CSS-sprites拼合

选择合适的图像素材去拼合到一张图片上，再、利用定位将图像在网页中渲染出来

一般小素材或者icon类素材或者比较少改动的图片适合拼合为CSS sprites
一般大图像或者网页背景不适合拼合为CSS sprites，网络带宽不好的情况下，访问大图的拼合图像，加载时间需要更长
推荐：一般最好将尺寸大小差不多的品何在一张图片上，这样也会有利于开发者计算定位，降低出错率，提高效率

3 CSS-sprites优点和缺点

优点：

将众多小图像拼合，一次性加载，减少http请求，提高网站性能
减少图片文件数量，减少命名太多的困扰，对开发者友好，降低出错率，提高效率

缺点：

在做图片拼合的时候，需要在页面中留有合适的空间，需要精确测量计算位置，会很繁琐，当然现在也有对应的自动拼合且产生定位代码的软件
不利于维护，当CSS-sprites上的一个图像需要改动时，往往需要改动其他的图像的CSS代码，这就要在制作CSS sprites的时候就要考虑这种图片以后改动会不会很频繁，如果很频繁，可以不放在拼合图像中

4 CSS-sprites例子

CSS-sprites

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
    <style>
        .sprites div {
            margin: 5px;
        }
        .sprites span {
            float: left;
            width: 20px;
            height: 20px;
            background-image: url(sprite.png);
            background-size: 60px 40px;
        }
        .sprites1{
            background-position: 0 0;
        }
        .sprites2{
            background-position: -20px 0;
        }
        .sprites3{
            background-position: 0 -20px;
        }
        .sprites4{
            background-position: -20px -20px;
        }
        .sprites5{
            background-position: -40px 0;
        }
        .sprites6{
            background-position: -40px -20px;
        }
    </style>
</head>
<body>
<div class="sprites">
    <div><span class="sprites1"></span>付款图标</div>
    <div><span class="sprites2"></span>删除图标</div>
    <div><span class="sprites3"></span>存款图标</div>
    <div><span class="sprites4"></span>粘贴图标</div>
    <div><span class="sprites5"></span>笑脸图标</div>
    <div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>

然后快去看看执行结果吧：

result