一，啥是css精灵图？

哦哟， 说起来这玩意儿css精灵图啊，就是那种把优良许多细小图片拼成一个巨大图片，然后通过CSS来kan得出来这玩意儿细小图片的某个有些。百度百科上这么说的，我记不太清了。

二，为啥要用css精灵图？

嘛，用这玩意儿精灵图嘛，基本上就是两个优良处。第一个是Neng少许些对服务器的求次数，让网页加载geng迅速。第二个是管理起来方便，全部的细小图片dou在一个巨大图里不用到处找。

三，怎么制作并用css精灵图？

这玩意儿制作和用啊，其实就两步。

1. 用ps制作精灵图

先说说 你需要在PS里新鲜建一个透明的图层，然后放巨大图层，新鲜建参考线。具体步骤是这样的：

1. 新鲜建一个透明的图层。
2. 用alt+鼠标滚动键，放巨大图层。
3. 新鲜建参考线。

图1：新鲜建透明图层

图2：放巨大图层并新鲜建参考线

然后你就Neng把细小图片放进去啦。比如 我这里的细小图片巨大概就是25px*25px，所以我在参考线上建立了3条水平方向和3条垂直方向的参考线。

图3：建立参考线

图4：放入细小图片

2. 用css和html代码kan得出来精灵图的各个细小图

这一步，你需要写一些CSS和HTML代码。

2-1. 引入图片

先说说 你需要引入你的精灵图，代码如下：

图5：引入图片

        .jlt {
            background-image: url;
            background-repeat: no-repeat;
            display: inline-block;
            width: 25px;
            height: 25px;
            vertical-align: bottom;
            margin-bottom: -5px;
        }
    

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

然后你需要用CSS来定位各个细小图，代码如下：

        .f1 {
            background-position: 0px 0px;
        }
        .f2 {
            background-position: -25px 0px;
        }
        .f3 {
            background-position: 0px -25px;
        }
    

2-3. 用html代码，使细小图kan得出来

再说说你需要用HTML代码来kan得出来细小图，代码如下：

就这样，你的CSS精灵图就制作完成了！

哎呀，写到这里我头dou巨大了感觉像是没上过学的人写的。但是这玩意儿方法确实是挺有用的，你试试kan就晓得了。