CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

下面我就详细的讲解下他的使用技巧，包你现在不懂的童鞋会有个清楚的全新了解，虽然目前有这样的工具，但是还是要先清楚他的原理，技巧性的来做也会很快速的完成定位，下面我分享加个案例。

首先跟大家说明一点，由于需要定位的背景都是合并在一张图的，所以都是一刀切的，要么是X轴坐标一致要么是Y轴坐标一致，也就有了我下面要讲述的2种类型了。

1。横向定位坐标

横向定位坐标意思就是Y轴坐标固定,它的特点就是每个图标的高度是一致的，通过改变x坐标的位置来改变背景。只需测量每个图标的宽度就可以知道x轴的坐标了。如果你还不知道这个规律，下面我就讲解给你听吧，下面拿我做的2个案例来说事。

效果图：

实际背景图：

那么具体来讲解怎么来定位，这里是改变X坐标来定位。

由于高度都是一样所以Y轴上的坐标都是0或top

这里每个图标我是用一个span做背景的，下面具体分析下代码：

<div class="join c">
            <strong>Join us on:</strong>
            <ul class="c">
                <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
                <li><a href="http://pinterest.com/fancyla