CSS 雪碧图

CSS 图像精灵

了解图像精灵技术，优化图片加载性能。

什么是图像精灵？

图像精灵（Image sprite）是一个包含一组较小图形元素（如图标或按钮状态）的单个图片文件，它们被排列在一个网格中。

为什么要使用它们？网页上的每张图片都需要向服务器发送一个单独的 HTTP 请求。如果一个页面包含许多小图片（例如社交媒体图标、导航箭头），这会导致大量的请求，可能减慢页面加载时间，尤其是在高延迟的网络连接下。

通过将这些小图片合并到一个精灵文件（sprite file）中，可以显著减少服务器请求的数量。然后使用 CSS 的 background positioning（背景定位）来仅显示精灵图中每个元素所需特定部分。

优点：减少 HTTP 请求次数，潜在地加快加载速度，并节省带宽。

图像精灵 - 工作原理

假设您有一个名为 sprite.png 的精灵图片文件，其中包含几个图标。

假设 sprite.png 在左上角 (0px, 0px) 包含一个 ‘home’ 图标，并在其正下方 (0px, -50px) 包含一个 ‘next’ 图标，每个图标的宽度和高度都是 40px。

要在元素上显示 ‘home’ 图标：

HTML:
```html
<a href="#" class="icon icon-home">Home</a>

CSS:

.icon {
  display: inline-block; /* 或者 block */
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  /* 设置尺寸以匹配精灵图中的图标大小 */
  width: 40px;
  height: 40px;
  /* 可选：如果图标提供了含义，则隐藏文本 */
  text-indent: -9999px;
  overflow: hidden;
}

.icon-home {
  /* 定位背景以显示左上角的图标 */
  background-position: 0px 0px;
}

要显示 'next' 图标：

```css
HTML:
```html
<a href="#" class="icon icon-next">Next</a>

CSS:

/* .icon 样式保持不变 */

.icon-next {
  /* 调整 background-position 以显示 'home' 下方的图标 */
  background-position: 0px -50px;
}

解释：
1. 使用一个 HTML 元素（如 `<a>` 或 `<span>`）作为容器。
2. `width` 和 `height` 设置为匹配精灵图中*单个图形*的尺寸。
3. `background-image` 设置为精灵文件。
4. `background-repeat: no-repeat;` 至关重要。
5. 通过调整 X 和 Y 坐标（通常是负值）来改变 `background-position`，以在元素的边界内显示所需的部分。

## 图像精灵 - 悬停效果

精灵图也非常适合处理悬停（hover）/激活（active）状态，而无需加载延迟。只需将不同的状态包含在同一个精灵图片中即可。

假设 `sprite.png` 现在也包含 'home'（位于 -40px, 0px）和 'next'（位于 -40px, -50px）的悬停状态。

```css
CSS:
```css
/* 现有 .icon, .icon-home, .icon-next 样式... */

.icon-home:hover {
  /* 水平移动背景位置以显示悬停状态 */
  background-position: -40px 0px;
}

.icon-next:hover {
  /* 水平移动背景位置以显示悬停状态 */
  background-position: -40px -50px;
}

由于整个精灵图（包括悬停状态）一次性加载，悬停时的状态变化是即时的，从而改善了用户体验。

## 现代替代方案与注意事项

虽然仍然是一种有效技术，但由于以下原因，图像精灵的必要性有所降低：

- **HTTP/2 和 HTTP/3：** 这些较新的协议比 HTTP/1.1 更有效地处理多个并发请求，减少了单独图片请求的开销。
- **SVG（可缩放矢量图形）：** 对于图标和简单的图形，通常首选 SVG。它们与分辨率无关（缩放时不会像素化），文件大小通常更小，并且可以用 CSS 和 JavaScript 进行操作。SVG 可以直接嵌入 HTML 中，通过 `<img>` 标签使用，或作为 CSS 背景。
- **图标字体：** Font Awesome 等字体允许您将图标作为文本字符嵌入，它们可以平滑缩放，并且易于使用 CSS 的 `color`、`font-size` 等属性进行样式设置。
- **构建工具：** 现代前端构建工具（如 Webpack、Parcel）可以自动化图像优化，有时甚至自动生成精灵图（CSS Spritesmith）或将小图片以内联方式生成为 Data URIs。

何时仍可使用精灵图：
- 需要支持旧版浏览器/HTTP/1.1 环境的项目。
- 复杂的位图图像集合，其中悬停/激活状态至关重要且 SVG/字体不适用。
- 处理基于精灵图的既有系统。

对于新项目，特别是图标，请首先评估 SVG 和图标字体，因为它们通常提供更大的灵活性和可伸缩性。