雪碧图的原理，使用
前端雪碧图（也叫精灵图、CSS Sprite）是一种常见的性能优化技术，用于将多个小图标或图片合并成一张大图，通过 CSS 控制显示区域来减少 HTTP 请求次数，从而提升页面加载速度和渲染性能。
一、雪碧图原理
核心思想：
- 将多个小图标合并为一张大图；
- 使用
background-image+background-position来控制显示哪一部分； - 减少图片请求次数 → 提升首屏加载速度。
工作机制：
| 步骤 | 描述 |
|---|---|
| 1. 合并图片 | 多个小图标合并为一张 PNG 图片 |
| 2. 定义样式 | 使用 CSS 设置背景图和偏移量 |
| 3. 显示图标 | 不同的类名对应不同的偏移位置 |
二、使用方式
1. 基础 HTML + CSS 实现
<span class="icon icon-home"></span>
<span class