目录
文献1：
关于雪碧图(css sprites)网上已经有非常详细的介绍，比如百度百科，最简单的来说，CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，然后利用background-position属性对图片所需要的部分进行精确定位，从而达到减少服务器请求次数的目的。
这里主要使用雪碧图实现一个最简单的小图标导航展示。具体代码可以见附件1，素材详见附件2，效果图详见附件3。
本例使用内部样式的方式对整个文档格式化处理，最核心的部分采用无序列表的方式完成对导航条目的排版。内部样式中:#mainbody{}部分即对主体部分完成初试化工作，接下来清除CSS中ul的默认属性，然后对列表中的每一行li完成初始化工作，其次对h3格式进行重置，满足自身需要，使用text-indent属性让文字缩进，以便于腾出置放图标的空间，最后便是关于CSS sprites中最核心的部分：
background: url(00.png) no-repeat;
.sp-1 i{background-position: 0px 0px;}
.sp-2 i{background-position: -26px 0px;}
.sp-3 i{background-position: -26px -27px;}
.sp-4 i{background-position: 0px -27px;}这里应尤其注意到background-position属性中坐标的方向问题，CSS中规定图片的左上方为原点(0px 0px)，向左为水平正方向，向上为竖直正方向，而且在写坐标时应特别注意不要忘记单位px
附件1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" />
<title>CSS Sprites</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
#mainbody{
position: relative;
width: 100px;
height: 150px;
border: solid 2px #fff;
padding: 2px;
}
ul{list-style: none;}
li{
display: block;
height: 25px;
line-height: 25px;
overflow: hidden;
margin: 5px;
border-bottom: 3px solid #dedede
}
h3{
font-weight: 100;
font-size: 14px;
text-indent: 10px;
}
li i{
background: url(00.png) no-repeat;
display: inline;
width: 25px;
height: 25px;
float: left;
}
.sp-1 i{background-position: 0px 0px;}
.sp-2 i{background-position: -26px 0px;}
.sp-3 i{background-position: -26px -27px;}
.sp-4 i{background-position: 0px -27px;}
</style>
</head>
<body>
<div id="mainbody">
<ul>
<li class="sp-1">
<i></i>
<h3>主页</h3>
</li>
<li class="sp-2">
<i></i>
<h3>空间</h3>
</li>
<li class="sp-3">
<i></i>
<h3>网络</h3>
</li>
<li class="sp-4">
<i></i>
<h3>其他</h3>
</li>
</ul>
</div>
</body>
</html>附件2
素材：
附件3
效果图：
文献2：
为了提高页面的性能，了解了CSS Sprites；
所谓CSS Sprites实际上就是对一张图片的重复使用，而这张图片中包含了许多的小图片，我们通过background-image印日大图，利用background-position进行定位，选出该图片中你所需要的那一部分，再将其放在你所想放在的地方；
这么做可以减少网页的http请求以及图片的字节数；从而提高页面的性能；核心为：
.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}
对于background-position的定位规则，我们可以查看W3C文档，实际上，左上就是（0px 0px），第一个值是水平方向，第二个值是垂直方向；那么可知，右上就是（-apx 0px），其中a就是右上这个小图片离大图左侧的距离；以此类推；
实例代码（实现一个响应式的导航栏）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
<script src="jquery-1.8.2.min.js"></script>
<title>CSS Sprites简单实例</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
ul{
list-style: none;
}
li{
display: block;
width: 25%;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
background-color: #ddd;
}
li:hover{
background-color: #eef;
}
li::after{
content: '';
display: block;
clear: both;
}
i{
position: relative;
left: 50%;
right: 50%;
margin-left: -13px;
display: block;
width: 25px;
height: 25px;
border: 1px solid white;
border-radius: 50%;
cursor: pointer;
}
.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}
span{
display: block;
width: 100%;
height: 20px;
line-height: 20px;
}
@media only screen and (max-width: 600px){
li{
width: 100%;
height: 50px;
}
}
</style>
</head>
<body>
<div>
<ul>
<li>
<i class="pic1"></i>
<span>house1</span>
</li>
<li>
<i class="pic2"></i>
<span>house2</span>
</li>
<li>
<i class="pic3"></i>
<span>house3</span>
</li>
<li>
<i class="pic4"></i>
<span>house4</span>
</li>
</ul>
</div>
</body>
</html>
效果图如下所示：
还是用了一个媒体查询，CSS3的属性，即在屏幕宽度小于600px是，导航栏的每一项宽度变为100%；
如图：
以上就是CSS Sprites的一个简单实例，实际上应用非常广泛！！！