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格式的精灵图以获得更好的缩放效果。