背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
分别引入会导致的问题：
（1）切换图片时，会发现图片有一个非常快的闪烁，
（2）网站性能不好
解决的方法有很多，这里介绍雪碧图的解决方法，准备，开车了···
一、雪碧图的介绍
雪碧图官方名字叫图片整合技术（CSS-Sprite）
雪碧图的特点：
1、 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2 、将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度
二：雪碧图使用步骤（管中窥豹）
1:先确定要使用的图标
2:测量图标的大小
3:根据测量结果创建一个元素
4:将雪碧图设置为元素的背景
5：设置一个偏移量以显示正确的图片
三：代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.btn:link {
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 200px;
height: 500px;
/*设置背景图片*/
background-image: url("./img2/早中晚.webp");
/*设置背景图片不重复*/
background-repeat: no-repeat;
background-position: -80px 0px;
}
.btn:hover {
/*
* 当是hover状态时，希望图片可以向左移动
*/
background-position: -300px 0px;
}
.btn:active {
/*
* 当是active状态时，希望图片再向左移动
*/
background-position: -500px 0px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>
