精灵图的概念：w3school网站的菜单鼠标悬浮切换就是采用背景大图实现的，页面中每一个部分都可以是一张小图，就是选中大图的一张小图进行切换，这个大图就叫精灵图
右键检查 -> sources -> ui2017 -> bg.png
PS：为什么用大图不用小图，因为程序中最耗时的就是在网络传输之后进行的I/O操作，如果都是用小图，那么就不停的进行I/O操作，这样当小图量达到一定量的时候，难免会影响页面加载的速度，用大图只要做一次请求，就获得所有的资源，这样加载的速度就会很快
PS：精灵图操作永远是上移或者左移，就是负值，如果正值就会出现空白区域
1、基本的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图的操作</title>
<style>
.box{
500px;
height: 500px;
background-color: yellow;
/*加载背景图片*/
background-image: url("img/bg.png");
/*处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺*/
background-repeat: no repeat;
/*背景尺寸(这个不常用)，会缩放背景图*/
/*background-size: 100px 200px;*/
/*背景定位，往右移10（x轴左右偏移）、往下移20（y轴上下偏移）（-10、20往左移10，往下移20）*/
background-position: 10px 20px;
/*以上所有功能的简写方法:这叫整体赋值*/
background: url("img/bg.png") red no-repeat 10px 20px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2、精灵图操作实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图的操作</title>
<style>
body{
background-color: black;
}
.ele{
372px;
height: 90px;
background-color: red;
/*这里使用参数简写：下面的图片移动写了一个0，没有px，0和px是一样的*/
background: url("img/bg.png") no-repeat 0 -155px;
/*加了这个就变成网上滚动的效果*/
transition: 1s;
}
.ele:hover{
/*这里添加一个鼠标悬停动画效果，y轴上移*/
background-position-y: -255px;
/*这里添加一个鼠标样式*/
cursor:pointer;
}
</style>
</head>
<body>
<div class="ele"></div>
</body>
</html>