Html div背景图像缩放问题

我有一个与背景图像，其中包含同一图标的3种颜色的div

我根据用户查看的页面移动图标（背景位置：上/中/下）：

一切正常，直到我缩放页面（ctrl+mousewheel）-背景图像似乎向上移动了一个像素或其他什么，因此我可以在包装器div底部看到另一个图标的一个像素行：

屏幕来自IE，但在iPad上看起来更破碎…
你有没有想过是什么原因造成的以及如何修复

---

尝试制作分辨率更好的图像，然后再试一次。

您可以通过使用或只是在每个图像之间留出一些空间来防止精灵内的任何其他图像显示

我移动图标（背景位置：上/中/下）

使用时应使用显式的

px

偏移量。我想，在缩放方面，它会稍微稳健一些

---

当你缩放时，你真的无法阻止某些东西有时被“1px关闭”

---

例如，如果您有一个

42px

high元素，并将其缩放到125%，则您有一个

52.5px

high元素。浏览器必须以这种或那种方式将数字四舍五入。

因为这些图像是位图，如果你缩放它们，它们总是看起来很糟糕

你可以做很多事情：

使用raphael JS之类的库，并将图标作为向量插入：

例如，将图标包装成跨距，并使用PX大小而不是EM大小

在你的精灵之间留下更多的空间

在实现CSS精灵时，使用像素定位而不是顶部/中心/底部是更好的做法（并最终为您提供更好的控制），这样您想要显示的图像可以稍大一些（或有一点间距），因此支持缩放时看到的视觉溢出。您的其他图像/状态不会受到相邻图像/状态的影响，因为您正在使用特定于像素的位置设置它们的位置，而不是顶部/中心/底部，例如（从下面的文章链接）

更不用说像素定位允许您在图像底部添加其他状态，而不会影响其他现有状态。当然，当您开始水平添加图像时，情况会发生变化

---

这里有一个很好的参考资料：

hmm。。我在这里看不到我添加的屏幕截图：-（添加了另一个屏幕（640x480 bmp），再次没有发生任何事情：-/我们可以看到你的屏幕截图，别担心。哦，这一定是代理，而不是…谢谢我只有一个背景图像…这些屏幕截图应该很清楚，我无法在这里发布：-（我不建议这样做。它会使您的图像膨胀。在精灵之间留出多一点空间是可以的to@meo：是的，你说得对。让它们成对角线在这里太过分了。最后一个问题-如果我的图像的高度等于包装元素怎么办？就像菜单链接右侧的箭头一样？而不是填充或留出更多空间对我来说不起作用我，特别是在iPad上…@Gatekeeper：如果你不能预测你必须留下多少空间，因为元素可以包装成任意数量的线条，然后它可以在精灵中显示其他图像：试试我答案中的链接。我想你不明白。我的div有20px的高度，需要设置背景图标，也有20px的高度…当我在某些缩放级别上，图标之间的空白比在某些缩放级别上，我的div在图标区域中看起来更薄，因为空白变得可见。如果我在图像上以图标的颜色添加1px填充，那么在其他缩放级别上，我的div会更高一个像素，在白色背景下看起来也很难看：-/

#panel-a {
    background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
    background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
    background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
    background: transparent url(sprite.jpg) -283px -200px no-repeat;
}