css精灵图制作
CSS 精灵图制作方法
准备素材 将需要合并的小图标或图片整理到一个文件夹中，确保所有图片尺寸适中且风格一致。通常精灵图适用于静态小图标（如按钮、社交图标等）。
合并图片 使用图像编辑工具（如 Photoshop、GIMP 或在线工具）将所有小图片拼接成一张大图。排列时需注意留白和间距，避免重叠。背景通常设为透明或与页面背景一致。
编写 CSS
通过 background-position 定位精灵图中的具体图标。每个图标的位置需通过像素值精确计算。例如：
.icon {
width: 32px;
height: 32px;
background-image: url('sprite.png');
background-repeat: no-repeat;
}
.icon-home {
background-position: 0 0;
}
.icon-settings {
background-position: -32px 0;
}优化性能 减少 HTTP 请求是精灵图的核心优势。合并后的大图应压缩体积（工具如 TinyPNG），同时避免过度放大或缩小，以免失真。
响应式适配
针对高分辨率屏幕，可使用 background-size 调整精灵图显示比例。例如：
@media (-webkit-min-device-pixel-ratio: 2) {
.icon {
background-size: 64px 32px; /* 原始精灵图尺寸的一半 */
}
}自动化工具
开发中可借助 Webpack、Gulp 等工具的插件（如 gulp.spritesmith）自动生成精灵图和对应 CSS 代码，提升效率。
注意事项
- 图标间距建议为 5-10px，避免浏览器渲染时边缘切割。
- 定期检查精灵图利用率，移除未使用的图标以减小文件体积。
- 动态加载的图标不适合用精灵图，考虑使用 SVG 或字体图标替代。
