按钮变换及通用方式（雪碧图使用）

目录

一、流程

二、不完美方式

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、不完美方式

2、雪碧图方式

注意：这里的代码使用的图片就是前面的三个按钮在一起的图片