css精灵图制作
CSS精灵图制作方法
准备图片素材 将多个小图标或背景图片整合到一张大图中，确保图片间有足够间距避免重叠。使用设计工具如Photoshop、GIMP或在线工具如SpriteCow进行布局。
编写CSS代码
通过background-position属性定位精灵图中的具体图标。为每个需要显示精灵图部分的元素设置相同的background-image，并调整位置坐标。
.icon {
background-image: url('sprite.png');
width: 32px;
height: 32px;
display: inline-block;
}
.icon-home {
background-position: 0 0;
}
.icon-settings {
background-position: -32px 0;
}优化与注意事项
控制精灵图文件大小，避免加载性能问题。使用工具自动生成CSS代码和坐标，如Spritesmith或Glue。为高清屏准备2倍尺寸的精灵图并通过background-size缩放。
响应式适配 在媒体查询中调整精灵图尺寸和定位，确保不同屏幕分辨率下显示正常。考虑使用SVG格式的精灵图以获得更好的缩放效果。
