雪碧图

使用雪碧图核心: 主要针对于小的背景图片这种大图片也称sprites 精灵图或者雪碧图主要借助背景位置来实现--background-position 一般情况下精灵图都是负值（x轴右走是正值，左是负值，y轴上走是负值，下是正值）

案例-拼出自己的名字

<!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">
    <title>精灵图</title>
    <style>
        span {
            display: inline-block;
        }

        .x,
        .c,
        .j {
            background: url(1.png) no-repeat;
        }

        .x {
            width: 73px;
            height: 74px;
            background-position: -313px -355px;
        }

        .c {
            width: 58px;
            height: 73px;
            background-position: -187px -81px;
        }

        .j {
            width: 68px;
            height: 89px;
            background-position: -179px -164px;
        }
    </style>
</head>

<body>
    <span class="x">x</span>
    <span class="c">c</span>
    <span class="j">j</span>
</body>

</html>