在网页开发过程中，我们经常会遇到页面需要加载多张小图标、小背景图的情况，每一张图片都会对应一次HTTP请求，图片数量越多，请求次数越多，页面加载速度就会越慢。而CSS Sprites（CSS精灵图）技术可以有效解决这个问题，通过将多张小图合并到一张大图中，只需要请求一次大图，再通过CSS定位显示需要的部分，就能大幅减少请求次数，提升页面加载性能。
CSS Sprites核心原理
CSS Sprites的核心思路是把页面中用到的多张小图片，按照合理的布局合并到一张大的背景图中，然后给需要显示小图的HTML元素设置这张大图为背景，再通过background-position属性调整背景图的偏移量，让元素的背景区域只显示大图中对应的小图部分。
具体实现步骤
第一步：合并小图片为大图
我们可以先准备好需要用到的小图标，比如首页图标、用户图标、设置图标，将它们横向或纵向排列，合并成一张大图，记录下每个小图在大图中的位置坐标（左上角相对于大图左上角的偏移量）和尺寸。
第二步：编写HTML结构
假设我们需要在页面中展示三个不同的图标，对应的HTML结构如下：
<div class="icon-container"> <span class="icon icon-home">首页</span> <span class="icon icon-user">用户</span> <span class="icon icon-setting">设置</span> </div>
第三步：编写CSS样式
首先设置大图作为背景，然后为每个小图标设置对应的宽高和背景偏移量：
/* 公共图标样式 */
.icon {
display: inline-block;
width: 32px; /* 小图宽度 */
height: 32px; /* 小图高度 */
background-image: url('sprites.png'); /* 合并后的大图路径 */
background-repeat: no-repeat;
text-indent: -9999px; /* 隐藏文字 */
overflow: hidden;
}
/* 首页图标，假设在大图中偏移量为0 0 */
.icon-home {
background-position: 0 0;
}
/* 用户图标，假设在大图中偏移量为-32px 0，即向左移动32px */
.icon-user {
background-position: -32px 0;
}
/* 设置图标，假设在大图中偏移量为-64px 0，即向左移动64px */
.icon-setting {
background-position: -64px 0;
}注意事项
- 合并大图时不要预留过多空白，避免大图体积过大反而影响加载，同时小图之间的间距要合理，防止定位时相邻小图显示出来。
- 如果小图的尺寸不一致，需要按最大的小图尺寸设置元素的宽高，避免显示不全。
- CSS Sprites更适合固定尺寸的小图标，不适合可拉伸的背景图或者尺寸经常变化的小图。
- 如果项目中使用构建工具，可以通过对应的插件自动生成精灵图和对应的CSS代码，减少手动计算偏移量的工作量。
适用场景说明
CSS Sprites主要适用于页面中大量固定尺寸的小图标、小背景图的场景，比如导航栏图标、功能入口图标、状态标识图标等。如果页面中图片数量很少，或者图片尺寸差异极大、经常需要变动，就不太适合使用这项技术，反而会增加维护成本。
CSS_SpritesHTML图片优化性能优化修改时间：2026-05-25 10:55:37