雪碧图的原理，使用

前端雪碧图（也叫精灵图、CSS Sprite）是一种常见的性能优化技术，用于将多个小图标或图片合并成一张大图，通过 CSS 控制显示区域来减少 HTTP 请求次数，从而提升页面加载速度和渲染性能。

---

一、雪碧图原理

核心思想：

• 将多个小图标合并为一张大图；
• 使用 background-image + background-position 来控制显示哪一部分；
• 减少图片请求次数 → 提升首屏加载速度。

工作机制：

步骤	描述
1. 合并图片	多个小图标合并为一张 PNG 图片
2. 定义样式	使用 CSS 设置背景图和偏移量
3. 显示图标	不同的类名对应不同的偏移位置

---

二、使用方式

1. 基础 HTML + CSS 实现

<span class="icon icon-home"></span>
<span class