目录
文献1：
附件1
附件2
附件3
文献2：
参考文献
关于雪碧图(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
素材：
效果图：
为了提高页面的性能，了解了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的一个简单实例，实际上应用非常广泛！！！
https://blog.csdn.net/u013595419/article/details/50465935
https://blog.csdn.net/zheng_pika/article/details/79687275
