CSS精灵图技术通过合并图标减少HTTP请求，提升页面加载速度。使用时需准备整合图，设置元素宽高和背景图，再用background-position定位具体图标。例如.btn-delete{width:16px;height:16px;background-image:url(sprites.png);background-position:-20px -50px;}。尽管WebP、SVG、字体图标及HTTP/2降低了其必要性，但在静态图标多或兼容旧浏览器场景下仍具价值。
CSS精灵图技术（CSS Sprites）是一种将多个小图标或图片合并到一张大图上的前端优化方法。通过在CSS中使用 background-image 和 background-position 属性，控制显示这张大图的某一部分，从而实现不同元素显示不同图像的效果。
为什么使用精灵图？
主要目的是减少网页加载时的HTTP请求次数。每个图片资源都需要一次网络请求，请求越多，页面加载越慢。把多个图标合成一张图后，只需加载一次，提升性能，尤其对移动端和网速较慢的环境有明显帮助。
- 减少服务器请求，加快页面渲染
- 降低图片总大小（合并后可能更小）
- 避免鼠标悬停时图标闪烁（图片已预加载）
怎么使用精灵图？
步骤简单：先有一张包含所有图标的整合图，再用CSS定位显示具体部分。
- 准备一张精灵图（可用工具如Photoshop、在线合并工具生成）
- 给需要显示图标的元素设置宽高
- 设置该元素的背景图为精灵图
- 通过 background-position 调整显示区域（负值常见）
有一个按钮要显示“删除”图标，它在精灵图中的位置是 x: -20px, y: -50px。CSS写法如下：
立即学习“前端免费学习笔记（深入）”；
.btn-delete {
width: 16px;
height: 16px;
background-image: url(sprites.png);
background-position: -20px -50px;
}
现在还用得多吗？
随着WebP、SVG、字体图标和HTTP/2的普及，精灵图的使用有所减少。HTTP/2支持多路复用，请求多个小图不再那么耗时。但在追求极致性能或兼容老浏览器时，精灵图仍是有效手段，尤其适用于静态图标较多的项目。
基本上就这些。不复杂但容易忽略细节。
