css精灵图也叫雪碧图，是将多个零散的小图片整合到一张大图片上的技术实现方案，在前端开发中主要用于优化页面加载性能，减少不必要的网络请求开销。
css精灵图的核心原理
浏览器加载网页资源时，每一个图片都会触发一次HTTP请求，当页面中存在大量小图标时，频繁的请求会拖慢页面加载速度。css精灵图的核心思路就是把所有需要用到的小图标拼接成一张大图，页面只需要请求一次这张大图，再通过background-position属性调整背景图的位置，就能显示对应需要的小图标，从而把多次请求合并为一次。
如何实现css精灵图
实现css精灵图主要分为两步，第一步是制作精灵图，第二步是通过css代码定位需要显示的图标。
1. 制作精灵图
可以使用Photoshop、Figma等设计工具，将多个小图标按照统一的间距排列在一张画布上，导出为一张png或者jpg格式的图片即可。制作时建议记录每个图标在大图中的位置坐标，方便后续编写css代码。
2. 编写css定位代码
核心是通过background-image引入精灵图，再通过background-position移动背景图的位置，让目标图标显示在元素的可视范围内。下面是一个简单的示例：
/* 精灵图整体样式 */
.sprite {
background-image: url(./sprite.png); /* 引入合并后的精灵图 */
background-repeat: no-repeat; /* 禁止背景图重复 */
width: 32px; /* 单个图标的宽度 */
height: 32px; /* 单个图标的高度 */
display: inline-block;
}
/* 第一个图标，坐标假设为(0, 0) */
.icon-home {
background-position: 0 0;
}
/* 第二个图标，坐标假设为(-32px, 0) */
.icon-user {
background-position: -32px 0;
}
/* 第三个图标，坐标假设为(-64px, 0) */
.icon-setting {
background-position: -64px 0;
}
对应的html结构如下：
<div class="sprite icon-home"></div> <div class="sprite icon-user"></div> <div class="sprite icon-setting"></div>
css精灵图的优缺点
优点
- 减少HTTP请求次数，提升页面加载速度，尤其是小图标较多的页面优化效果明显。
- 减少图片的总体积，多张小图合并后，总大小通常会小于所有小图单独的体积之和。
- 避免小图标加载时的闪动问题，所有图标一次性加载完成，不会出现逐个加载的闪烁情况。
缺点
- 维护成本较高，如果需要修改某个图标，可能需要重新拼接整个精灵图，并且调整对应的坐标值。
- 不适合图标尺寸差异过大的场景，如果图标大小不一，合并后的精灵图会有较多空白区域，浪费空间。
- 高清屏适配需要额外处理，可能需要准备2倍图或者3倍图的精灵图，增加开发工作量。
适用场景
css精灵图适合应用在图标尺寸统一、数量较多、不需要频繁修改的静态图标场景，比如导航栏图标、按钮图标、状态提示图标等。如果是需要动态变化、尺寸差异大或者经常修改的图标，不建议使用精灵图，更适合使用svg图标或者字体图标方案。
注意事项
使用background-position定位时，坐标值是相对于元素左上角的偏移量，向左和向上移动为负值，向右和向下移动为正值，编写代码时需要根据精灵图中图标的位置准确计算偏移量。另外，如果精灵图是通过工具自动生成的，通常工具会同时输出对应的css代码片段，直接使用即可，不需要手动计算坐标。
css_spritebackground_position网页性能优化雪碧图修改时间：2026-06-17 09:12:17