一，什么是css精灵图？

引用百度□□□百科的原□□□□话，CSS Sprites在国内很□□□多人叫css精灵，是一种网□□页图片应□□□□用处理方□□式。它允许你♦将一个页□□□□面涉及到□□的所有零❖星图片都※包含到一△张大图中□□□□去。

二，为什么要使用css精灵图？

使用css精灵图主要有两点好处；
1.让小图（小图标），既请求一□□次大图，得到所有□□□小图实现□□□一次请求，减少对服●务器的请□□□求速度，避免网页□□□造成延迟。
2.方便对小图（小图标）的管理。

三，如何制作并使用css精灵图？

主要分为两部分：

1.使用ps制作精灵图；

步骤演示:

1. 新建一个透明的图层。

             图1

1. 使用alt+鼠标滚动键，放大图层。
2. 新建参考线；   

             图2
在实际测□□□□量小图大□□□□致宽高后，就开始建☆立参考线。比如，我的小图◉大致为25px*25px（宽高不超★过25px*25px）。所以，我在参考△线取向上□□□□水平方向□□□建立了3条参考线（25像素、50像素、75像素）；垂直方向□□□□建立了3条参考线（25像素、50像素、75像素）。
 
            图3　　　　　

1. 依次放入各个小图（小图标）；

　　　　       　图4
 
 
2.使用css和html代码显示□□精灵图的□□□各个小图。

步骤演示：

 2-1.引入图片；（红色框内✦为主要代□□码）

 
             图5
代码如下：
.jlt {
       background-image: url(../images/jlt.png);
       background-repeat: no-repeat;
       display: inline-block;
       width: 25px;
       height: 25px;
       vertical-align: bottom;
       margin-bottom: -5px;
}

2-2.利用css定位，定位各个□□小图。

代码如下：
.f1 {
      background-position: 0px 0px;
}
 
.f2 {
      background-position: -25px 0px;
    }
.f3 {
      background-position: 0px -25px;
}

2-3.使用html代码，使小图显□□□□示。

代码如下：

 

3-3.最终效果□□□□展示。


                   图6
 

四，总结：

                                         图7
 
由图7得，根据各个□□比较，最后得出：当背景定☆位为0px 0px时；得到原点。改变数字□□就得到各□□□个轴上的◈图片；
当第一个□□数字是正□□数时，为空（以原点为□□□□起始点，向左移动）；当我第一□□□□个数字为□□□□负数时（以起点为□□原点，向右移动）。
当第二个□□数字为正□□□数时，为空（以原点为□□起始点，向左移动）；当我第二□□□□个数字为□□□□负数时（以起点为✦原点，向下移动）。
因此，第一个数□□□字控制左•右（正为左，负为右）；第二个数□□字控制上□□□□下（正为上，负为下）；原点的上□□□方和左方◎都没有图▲标，所以为空。
Ps：如果我要□□□得到白色□□袜子的话，数字为（-50px 0px）;如果我要✦黄色袜子□□□□的话，数字为（-50px -25px）。
温馨提示：使用行内元素是无法显示图片的。

做账：