CSS高级技巧——精灵图

1、 精灵图

1. 为什么需要精灵图
2. 精灵图的使用
3. 精灵图的案例

1.1为什么需要精灵图
        在平常上网过程中，打开网址就可以看到网页了，网页中会有许多的小图标及图片，会像服务器去请求某个小图标，有多个小图标都要一个一个的去请求过来，这样会让服务器的压力过大，也大大降低页面的加载速度，因此，为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites，CSS雪碧）
       核心原理:将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.2精灵图的使用（原理）
使用精灵图核心：
1.精灵技术主要针对背景图片使用，就是把多个小背景整合到一张大图中
2.这个大的图片我们称为sprites精灵图
3.移动背景位置，此时可以用background-position
4.移动的距离就是这个目标图片的X和Y坐标，注意网页中的坐标有所不同
向右是X轴、向下是Y轴。
5.因为一般情况下都是往上往左移动，所以是负值。

1.3精灵图的使用（代码）
1.打开PS或者FW工具，将精灵图打开并且锁定（防止移动位置）
2.使用切片工具选择所需要的小图标，ps右键查看切片选项，里面会存在X轴和Y轴坐标，记住

3.创建盒子导入图片

图片默认显示的是左上角，这个使用我们要去位移它


这样对应的图标就展示出来了

总结：利用background-position来进行图片的定位，因为图片基本上是像左或者像上的所以值2都是为负值，以此类推大概就知道精灵图的使用了吧！