css雪碧图制作
理解CSS雪碧图的概念
CSS雪碧图（CSS Sprite）是一种将多个小图标或背景图像合并到一张大图中的技术。通过减少HTTP请求次数，可以显著提升网页加载性能。浏览器只需加载一张大图，再通过CSS定位显示特定部分。
准备工具和素材
需要图像编辑软件如Photoshop、GIMP或在线工具如SpriteCow。确保所有小图标尺寸相近，风格统一，并保留透明背景（PNG格式）。为每个图标命名以便后续定位。
合并图像
将所有小图标排列到一张大图中，通常采用横向或纵向排列。图标之间留适当间距避免重叠。保存为PNG或JPG格式，确保文件大小优化。
编写CSS代码
通过background-position属性定位雪碧图中的特定图标。为每个图标创建对应的CSS类，设置background-image为雪碧图路径，并调整background-position的X/Y坐标。
.icon-home {
width: 32px;
height: 32px;
background-image: url('sprite.png');
background-position: -10px -50px;
}使用示例
在HTML中为元素添加定义好的CSS类即可显示对应图标。如需悬停效果，可通过调整background-position切换雪碧图的不同部分。
<button class="icon-home"></button>自动化工具推荐
使用工具如Grunt、Gulp搭配插件（如grunt-spritesmith）可自动化生成雪碧图和CSS代码。这些工具会根据原始图标自动计算位置并输出样式。
注意事项
避免雪碧图过大导致加载延迟。对高频变化的图标慎用雪碧图，因为修改单个图标需重新生成整图。移动端需考虑Retina屏幕适配，可使用background-size缩放。
