CSS-sprit 雪碧图

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片

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

这个技术在网页中应用十分广泛，被称为css-sprite ，也成为雪碧图

雪碧图的特点：

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

局限只适用于背景图片不适用于GIF

通过改变background-position的值，来从css-sprit中选择所需的图片进行加载，即清除了首次加载白闪烁的现象，也压缩了内存，提升了用户体验。

雪碧图的使用步骤：

1、先确定要使用的图标

2、测量图标的大小

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         a:link{
10             display: block;
11             width: 100px;
12             height: 100px;
13             background-image: url(../img/bg.png);
14         }
15         a:hover{
16             background-color: aquamarine;
17         }
18         .box1{
19             width: 290px;
20             height: 100px;
21             background-image: url(../img/w3cschool.png);
22             background-position: 0 -150px;
23         }
24        .box2{
25            width: 130px;
26            height: 45px;
27            background-image: url(../img/w3cschool.png);
28            background-position: -380px -52px;
29 
30        }
31 
49     </style>
50 </head>
51 <body>
52     <div class="box1"></div>
53     <div class="box2"></div>
54     <a href="javascript:;"></a>
55     
56 </body>
57 </html>

效果图