CSS精灵

CSS精灵：将页面中要显示的小图放在一张大图里面利用定位显示想要的小图部分，用一张图显示多个小图，减轻服务器压力

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图
添加background-positon属性，改变背景图位置
3.1 可以使用PxCook 测量小图片左上角坐标
3.2 取负数左上移动（移到要显示的小图盒子位置）

<style>
        div{
            width: 139px;
            height: 138px;
            background-color: palegoldenrod;
            background-image: url("demo1/static/abcd.jpg");
            //这个小图在大图中显示的位置坐标
            background-position: -108px -275px;
        }
    </style>
</head>
<body>
    <div></div>
</body>