CSS 精灵图（Sprites）是一种优化网页加载时间和性能的技术，通过将多个图像合并到一个图像文件中，减少了 HTTP 请求的数量，从而提高了加载速度。下面是 CSS 精灵图的基本概述：
CSS 精灵图的工作原理：
- 合并图像：将多个图像（例如图标、按钮）合并到一个较大的图像文件中。这个图像被称为“精灵图”。
- 定位显示：使用 CSS 只显示精灵图中的一部分。这是通过将元素的背景图像设置为精灵图，并调整
background-position属性来显示所需的图像部分来实现的。
示例：
假设你有一个精灵图，包含三个图标，水平排列。
精灵图（sprite.png） ：
+-----------+-----------+-----------+
| 图标 1 | 图标 2 | 图标 3 |
+-----------+-----------+-----------+
CSS：
css复制代码
.icon {
width: 32px; /* 每个图标的宽度 */
height: 32px; /* 每个图标的高度 */
background-image: url('sprite.png');
background-repeat: no-repeat;
}
/* 图标 1 */
.icon.icon1 {
background-position: 0 0;
}
/* 图标 2 */
.icon.icon2 {
background-position: -32px 0;
}
/* 图标 3 */
.icon.icon3 {
background-position: -64px 0;
/*将背景图像的显示位置向左偏移 64 像素，垂直方向不偏移。*/
}
在这个示例中，.icon 类定义了精灵图的背景图像和大小，background-position 属性用来调整显示的图像部分。这样，每个图标都可以通过调整背景位置来显示。
关于 CSS 精灵图的说法：
A. 正确：CSS 精灵图允许将一个页面涉及到的所有零星图片合并到一张大图中，以减少 HTTP 请求。
B. 正确：使用 CSS 的 background-image、background-repeat 和 background-position 属性可以进行背景定位，从而显示精灵图的特定部分。
C. 部分正确：CSS 精灵图确实可以减少网页的 HTTP 请求，从而提高性能。CSS Sprites 能减少图片的字节，通过比较，3张图片合并成1张图片的字节总是小于这3张图片的字节总和。然而，精灵图可能会增加单个图片的字节总数，但通常这是为了减少请求次数。
D. 错误：虽然 CSS 精灵图可以将多个状态的图片合并在一起，减少文件数量和管理复杂性，但它并不会避免将不同状态的图片切割出来并个别命名。每个状态的图片仍然需要在精灵图中分开安排，并且需要通过 CSS 定义显示哪一部分。
