精灵图（CSS Sprite）制作教程
适用对象：
前端开发初学者
设计师
网站优化相关人员
课程目标：（理论+实操）
掌握精灵图的基本概念、作用及使用场景
学会使用 Photoshop 或在线工具制作精灵图
熟练掌握 CSS 背景定位的技巧，能够独立应用精灵图
二、课程大纲
第一部分：精灵图基础概念
1. 什么是精灵图（CSS Sprite）
- 精灵图（CSS Sprite）是一种将多个小图片合并到一张大图片中的技术，通过 CSS 控制背景位置来显示不同部分的图片。
- 主要用于网站图标、按钮、导航栏背景等元素的优化。
2. 精灵图的作用
减少 HTTP 请求数：
- 浏览器每次加载一个图片都会发起 HTTP 请求，多个小图会导致请求增多，影响网站性能。
- 使用精灵图后，只需加载一张大图片，减少了服务器请求，提高页面加载速度。
减少闪烁问题：
- 有些浏览器加载图片时可能会出现短暂闪烁，使用精灵图可以避免这种情况。
便于管理和统一风格：
- 统一存储所有小图片，方便管理和维护。
- 精灵图的缺点
- 维护成本高：
- 如果需要新增或修改某个图标，可能需要重新生成整个精灵图，并调整 CSS 坐标。
- CSS 计算复杂：
- 需要精确计算 background-position，对于大规模项目来说不够灵活。
第二部分：精灵图的制作方法
方法1：使用 Photoshop 手动制作精灵图（适用于小型项目）
工具： Photoshop
步骤：
- 创建一个新画布（尺寸可按需求设定，如 512×512px）。
- 导入所有小图，并整齐排列（可以等间距排列，方便后续计算坐标）。
- 记录每个小图的坐标（X, Y, 宽度, 高度）。
- 导出合成的精灵图（.png 格式），确保背景透明。
示例：
如果有 3 个图标：
A（大小 50×50px，位于 0,0 位置）
B（大小 50×50px，位于 0,50 位置）
C（大小 50×50px，位于 0,100 位置）
则对应的 CSS 坐标如下：
// css代码
.icon-a {
width: 50px;
height: 50px;
background: url('sprite.png') 0px 0px no-repeat;
}
.icon-b {
width: 50px;
height: 50px;
background: url('sprite.png') 0px -50px no-repeat;
}
.icon-c {
width: 50px;
height: 50px;
background: url('sprite.png') 0px -100px no-repeat;
}
方法2：使用在线工具自动生成精灵图（适用于批量图标处理）
推荐工具：
- CSS Sprite Generator
- SpriteCow
- SpritePad
操作步骤：
- 访问精灵图生成网站，上传所有小图。
- 选择自动排列方式（横排、竖排或自由排列）。
- 生成精灵图并自动获取 CSS 代码。
- 下载精灵图并应用到项目中。
示例：
自动生成的 CSS 代码：
// css代码
.icon-home {
background: url('sprite.png') -10px -10px no-repeat;
width: 40px;
height: 40px;
}
.icon-search {
background: url('sprite.png') -60px -10px no-repeat;
width: 40px;
height: 40px;
}
第三部分：精灵图的 CSS 应用（30分钟）
1. CSS 背景定位（background-position）
原理：
background-position: X Y;
- X 代表横向偏移（负值表示向左移动）
- Y 代表纵向偏移（负值表示向上移动）
示例：
// css代码
.icon {
background-image: url('sprite.png');
background-repeat: no-repeat;
display: inline-block;
}
.icon-user {
width: 50px;
height: 50px;
background-position: -100px -50px;
}
2. CSS 精灵图 hover 交互效果
实现方式：hover 时切换背景位置
// css代码
.icon-button {
width: 60px;
height: 60px;
background: url('sprite.png') -20px -20px no-repeat;
}
.icon-button:hover {
background-position: -80px -20px; /* 鼠标悬停时切换位置 */
}
3. CSS 精灵图在响应式设计中的应用
方法：使用多个精灵图适配不同设备
// css代码
@media (max-width: 768px) {
.icon {
background-image: url('sprite-small.png');
}
}
@media (min-width: 769px) {
.icon {
background-image: url('sprite-large.png');
}
}
四、实操练习
任务1：使用 Photoshop 制作简单精灵图
任务2：使用在线工具生成精灵图并应用到 HTML 页面
任务3：在网页中实现 hover 交互效果
任务4：使用 @media 让精灵图适配不同设备
五、课程总结 & 课后作业
1. 课程总结
- 了解了精灵图的概念和优缺点
- 学习了两种制作精灵图的方法（手动制作、在线工具）
- 掌握了 CSS background-position 的使用方法
- 学会了 hover 效果和响应式设计
2. 课后作业
- 选择一个网页项目，将页面中的多个小图片优化为精灵图。
- 使用 Photoshop 或在线工具制作一个 5×5 的精灵图，并编写对应的 CSS 代码。
- 探索 CSS 变量与精灵图结合使用的方法，提高代码复用性。
六、参考资源
- MDN CSS Sprites 介绍
- CSS Tricks 精灵图指南
- Sprite Cow 快速生成 CSS 代码