雪碧图解决图片闪烁问题（css-sprite）

雪碧图使用步骤：

1先确定要使用的图标

2测量图标的大小

3根据测量结果创建一个元素

4将雪碧图设置为元素的背景图片

5设置一个偏移量以显示正确的图片位置

雪碧图的特点：

一次性将多个图片加载进度，降低请求的次数，加快访问速度，提升用户的体验

解决图片闪烁问题：

可以将多个小图片同一保存到一个大图片中，然后通过background-position来显示

这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题

a:link{
            width: 93px;
            height: 29px;
            background: url(./img/09/btn.png);
        }
 
        a:hover{
            background-position: -93px  0;
            
        }
        a:active{
            background-position:  -186px 0  ;
           
        }
 
        <a href="#"></a>

（position默认位置是0 0

像左   上 移动为负值  右  下 移动为正值

）