CSS-Sprite/雪碧图

---

前言

今天在学习背景的时候，做了一个练习，题目是给了三张不同状态的图片要求是a标签的link事件hover事件和active事件分别展示不同的图片，心想还不简单三下五除二写完了。没想到最后看视频的时候发信啊有点瑕疵，当第一次进入页面触发不同事件时会出现在不同背景的间隙出现闪烁之后通过视频了解到可以用雪碧图解决（当时自己也有这个想法，只是不知道名称）

---

一、雪碧图是什么，以及出现闪烁的原因

通俗的讲就是将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片。这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题（间隙闪烁的原因就是因为图片属于外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载）

二、使用步骤

1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片

  		a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url('./img/09/btn.png')
        }

        a:hover{
            background-position: -93px 0;
        }

        a:active{
            background-position: -186px 0;
        }

---