项目展示
精灵图拼字母项目、精灵图王者页面项目分别如图15.1、15.2所示。
图15.1 精灵图拼字母项目展示
图15.2 精灵图王者页面项目展示
教学内容
认识精灵图
1. 认识精灵图（position）
精灵图又名雪碧图，即CSS Sprites，是一种CSS图像合并技术。
当网页图像过多时，服务器就会频繁地接受和发送请求图片，如图15.3所示，造成服务器压力过大，降低页面加载速度。
精灵图是将小图标和背景图像合并到一张大图片上，然后利用CSS的背景定位来显示需要显示的图片部分。所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出将小图片合并起来的那一张大图片（也就是精灵图）即可，这样在一定程度上减少了服务器接受和发送请求的次数，提高了页面的加载速度。案例如图15.4所示。
图15.3 浏览器与服务器
图15.4 携程网移动端的精灵图使用
2. 精灵图的使用方法
（1）创建一个容器（如〈div〉标签、〈span〉标签等）来加载精灵图。
（2）设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。代码为：
background-position：-Xpx -Ypx;(www.xing528.com)
为什么使用雪碧图时background-position属性值为负数？
操作过程：将图片向左移X个单位，然后向上移Y个单位，而网页的坐标向右为正，向下为正，如图15.5所示。
提示：
使用精灵图
精灵图的测量工具可以使用Fireworks，也可以使用 Adobe Photoshop，这里以使用Fireworks为例。Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的难度，使用Fireworks不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。借助于该工具，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。
3. 二倍图
移动端使用的精灵图一般采用2倍图或者3倍图，使用方法如下：
（1）在Fireworks中打开精灵图，记录此时精灵图大小，如图15.6所示。将这个精灵背景图等比例缩放到原来宽高的一半，记录此时缩放后的精灵图大小。
图15.5 Fireworks测量精灵图步骤
图15.6 记录精灵图大小
（2）此时页面应显示的是缩放后的图片，将缩放后的xy坐标作为背景定位坐标。
（3）background-size的宽度是缩放后的宽度。
二倍图使用案例代码如图15.7所示。
图15.7 二倍图使用案例代码
这样，就完成了精灵图二倍缩放，如果是三倍，将原图尺寸除以三就可以了。
项目训练
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
