<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>简单尝试雪碧图</title>
<style type="text/css">
.x1{
width: 98px;
height: 95px;
background-image: url("img/1x.png");
background-position: -10px -115px;
}
</style>
</head>
<body>
<div class="x1"></div>
</body>
</html>
雪碧图的使用步骤：
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
你想好background-position的偏移量就好，用一些好用的工具把那个像素量清楚
我用的是这个图片：
结果展示：我想要的是第二行的第一个元素。使用工具获得这个偏移量。
