作用
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
雪碧图的使用步骤：
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
雪碧图的特点：
一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
雪碧图；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 /* 默认第一个切图 */ 9 div{ 10 width: 41px; 11 height: 69px; 12 /* background-color: #bfa; */ 13 background-image: url(雪碧图按钮/icon-slides.png); 14 background-position: 0 0; 15 float: left; 16 margin-left: 50px; 17 } 18 /* 第二个切图 */ 19 .b{ 20 background-position: -41px 0; 21 } 22 23 /* 第三个切图 */ 24 .c{ 25 background-position: -83px 0; 26 } 27 /* 第四个切图*/ 28 .d{ 29 background-position: -124px 0; 30 } 31 32 </style> 33 </head> 34 <body> 35 <div class="a"></div> 36 <div class="b"></div> 37 <div class="c"></div> 38 <div class="d"></div> 39 40 </body> 41 </html>
效果
在线的雪碧图CSS代码生成
http://tools.jb51.net/code/css_sprite
http://alloyteam.github.io/gopng/