css sprites制作
什么是CSS Sprites
CSS Sprites是一种将多个小图片合并成一张大图的技术，通过background-position属性来显示需要的部分。这种技术可以减少HTTP请求次数，提升页面加载性能。
制作CSS Sprites的步骤
准备图片素材 将所有需要合并的小图标或图片整理到一个文件夹中，确保它们的尺寸和用途适合合并。通常用于按钮、图标等小型元素。
合并图片 使用图像编辑工具（如Photoshop、GIMP）或在线工具（如SpriteCow、Toptal Sprite Generator）将所有小图片拼合成一张大图。排列时需注意留白，避免图像重叠。
生成CSS代码
为每个小图片编写CSS规则，通过background-image引用合并后的大图，并用background-position调整显示位置。例如：
.icon-home {
width: 32px;
height: 32px;
background-image: url('sprites.png');
background-position: -64px 0;
}优化与注意事项
- 使用工具自动生成坐标：如SpriteCow可自动计算
background-position。 - 考虑Retina屏：为高清屏准备双倍尺寸的Sprites图，并通过
background-size缩放。 - 避免过度合并：仅合并高频使用的小图，大图单独加载更高效。
常用工具推荐
- 在线工具：SpriteCow、Toptal Sprite Generator。
- 构建工具插件：Webpack的
postcss-sprites、Gulp的gulp.spritesmith。 - 设计软件：Photoshop的图层导出功能。
代码示例
以下是一个完整的CSS Sprites实现示例：
/* 大图引用及公用样式 */
.sprite {
background-image: url('sprites.png');
display: inline-block;
}
/* 单个图标样式 */
.icon-search {
width: 24px;
height: 24px;
background-position: 0 0;
}
.icon-settings {
width: 24px;
height: 24px;
background-position: -24px 0;
}HTML中使用方式：
<span class="sprite icon-search"></span>
<span class="sprite icon-settings"></span>
