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>
效果图
