目录
一、流程
二、不完美方式
1、做法
2、解释
三、雪碧图方式
1、实现
2、解释
四、代码
1、不完美方式
2、雪碧图方式
一、流程
（1）正常情况下是普通按钮
（2）当鼠标移入时，则会变色
（3）当鼠标点击时，则会变黑
（4）以背景图方式设置按钮点击，达到上述效果
二、不完美方式
1、做法
（1）找到三张对应效果的图片
（2）分别对原元素、hover伪类、active伪类粘贴不同的图片
2、解释
（1）这种方式能解决问题，是常规思路
（2）但是可能第一次加载网页可能会出现空白加载的问题
-浏览器会按需加载资源或者图片
-在最开始的时候，会发送请求解析网页，因为原元素会最先展示，所以会解析原元素的图片
-但因为hover和active没有使用，所以不会第一时间解析和加载后面两个伪类的图片
三、雪碧图方式
1、实现
将所有状态的图片贴在一张中，通过给不同元素或者元素不同伪类设置偏移量，从而展示图片的不同位置
如图，这就是一个雪碧图
2、解释
（1）这种方式是开发的主流
（2）且因为只需要加载一张图片，加载速度快，节省资源，有更好用户体验
四、代码
注意：这里的图片均来自网上，想要重现可自行查找图片，或者前面的雪碧图可以直接使用
1、不完美方式
<!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>
/*
浏览器会按需加载资源或者图片，在最开始的时候，会发送请求
解析网页，因为a会最先展示，所以会解析a的图片
但因为hover和active没有使用，所以不会第一时间解析和加载
*/
a {
width: 101px;
height: 101px;
display: block;
background-image: url("../src/img_exercise/1.png");
}
a:hover {
background-image: url("../src/img_exercise/2.png");
}
a:active {
background-image: url("../src/img_exercise/3.png");
}
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>
2、雪碧图方式
注意：这里的代码使用的图片就是前面的三个按钮在一起的图片
<!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>
a {
background-image: url("../src/img_exercise/0.jpg");
display: block;
width: 101px;
height: 101px;
background-position: -104px -143px;
}
a:hover {
background-position: -249px -143px;
}
a:active {
background-position: -393px -143px;
}
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>
