CSS问题求助：添加新图片后精灵图标仅显示一半

嘿，我来帮你搞定这个CSS精灵图的问题！当添加新图片后图标只显示一半，大概率是精灵图的尺寸或者背景定位出了问题，咱们一步步排查解决：

核心原因分析 #

添加新图标后，精灵图的整体宽高、图标位置都会发生变化，但你原来的CSS还是沿用了旧的坐标和尺寸，就会导致图标显示不全。

具体排查&解决步骤 #

• 第一步：确认精灵图的实际尺寸
  用图像编辑工具（比如PS、GIMP或者在线的Pixlr）打开img-sprite.png，查看两个关键信息：

  • 每个图标的实际宽高（确保和CSS里的width:48px; height:48px;一致，如果新图标尺寸不同，要同步修改CSS）
  • 每个图标在精灵图里的准确坐标（左上角到精灵图左上角的偏移量）

• 第二步：修正背景定位坐标
  CSS里的background-position是负数偏移（向左/向上移动背景图来显示对应图标），如果精灵图新增内容后，旧坐标已经不再对应正确的图标位置，就需要重新计算：
  你可以打开浏览器F12开发者工具，选中对应的<i>元素，实时调整background-position的数值，直到图标完整显示。

• 第三步：检查图片加载是否正常
  打开浏览器F12的Network面板，查看img-sprite.png的加载尺寸，确保和本地编辑的精灵图尺寸一致——如果服务器自动压缩了图片，也会导致显示错位。

修正后的示例代码 #

假设重新测量后坐标需要调整，你的CSS可以改成这样：

ul.social li{ display: inline-block; }
ul.social li i{ 
  background: url(../images/img-sprite.png) no-repeat -4px -40px ; 
  width: 48px; 
  height: 48px; 
  display: inline-block; 
  vertical-align: middle; 
  margin: 0 5px 0 0; 
}
ul.social li i.twitter{ background-position: -64px -40px; }
ul.social li i.google{ background-position: -122px -39px; }
ul.social li i.ig{ background-position: -200px -39px; }

小技巧 #

可以用在线精灵图工具来自动生成准确的CSS代码，只需要上传你的精灵图，点击对应图标就能直接复制正确的background-position和尺寸，省得手动计算出错~

内容的提问来源于stack exchange，提问作者M Kahfi Kresnotutuko