在网页中使用雪碧图的目的主要是为了优化页面性能，因为页面中每一张图片都需要提交一次HTTP请求，当图片过多的时候会使得加载量过大，然后给页面的加载造成负担，甚至出现卡顿的现象
雪碧图的应用场景：
（1）一般来说小的图标是要合成雪碧图的；
（2）一些大图片或者动态加载的图片不适合使用精灵图，
雪碧图的实现原理：
（1）需要一个设置好宽高的容器，将雪碧图作为background
（2）通过设置background-position的值来移动图片的位置
优缺点：
优点是减少http请求的次数，缓解了请求压力；缺点是小图标在高清屏上可能会失真，另外平凡定位会占用较多的CPU。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图</title>
</head>
<style>
h3,ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li h3 {
font-size: 14px;
font-weight: 400px;
}
li {
display: block;
height: 40px;
line-height: 45px;
overflow: hidden;
}
.LOGO {
width:160px;
background: #f8f8f8;
}
li i {
background: url(img/sprite.PNG);
display: inline;
width: 55px;
height: 65px;
float: left;
margin: 3px 10px 0 0;
}
.logo-1 i{
background-position: 0 -5px;
}
.logo-2 i{
background-position: 0 -49px;
}
.logo-3 i{
background-position: 0 -92px;
}
.logo-4 i{
background-position: -75px -3px;
}
.logo-5 i{
background-position: -75px -50px;
}
.logo-6 i{
background-position: -74px -142px;
}
.logo-7 i{
background-position: -78px -185px;
}
.logo-8 i{
background-position: -77px -230px;
}
</style>
<body>
<div class="LOGO">
<ul>
<li class="logo-1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="logo-2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="logo-3">
<i></i>
<h3>运动户外</h3>
</li>
<li class="logo-4">
<i></i>
<h3>居家饰品</h3>
</li>
<li class="logo-5">
<i></i>
<h3>居家家具</h3>
</li>
<li class="logo-6">
<i></i>
<h3>爱上喝水</h3>
</li>
<li class="logo-7">
<i></i>
<h3>私家车</h3>
</li>
<li class="logo-8">
<i></i>
<h3>乐器类</h3>
</li>
</ul>
</div>
</body>
</html>
合成的雪碧图以及最终效果：
