div背景图像缩放问题

Question

我有一个带背景图片的div，其中包含3个相同图标的颜色

我根据用户查看的页面移动图标（背景位置：顶部/中心/底部）：

所有工作都很好我会缩放页面（ctrl + mousewheel） - 比背景图像似乎向上移动一个像素或者其他东西，所以我可以看到我的包装div底部的另一个图标的一个像素行：

屏幕来自IE浏览器，但它在iPad上看起来更加破碎...... 有关导致此问题的原因和解决方法的任何想法？

Answer 1

您可以使用diagonal sprites阻止精灵中的任何其他图像，或者只是在每个图像之间留出一些空格。

  

我移动图标（背景位置：顶部/中心/底部）

使用时应使用明确的px偏移量。我怀疑在缩放时会稍微强一些。

---

当您放大时，没有什么可以阻止有时“1px off”的事情。

例如，如果您有一个42px高元素，并且缩放到125％，那么您有一个52.5px高元素。浏览器必须以这种方式对数字进行舍入。

Answer 2

由于这些图像是位图，因此在缩放它们时它们总是看起来很糟糕。

你可以做树木事情：

1. 使用像raphael JS这样的库，并将您的图标作为向量包括在内：http://raphaeljs.com/
2. 例如使用PX尺寸而不是EM's将图标包裹到跨度中。
3. 在精灵之间留出更多的空间

Answer 3

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

Answer 4

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

#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;
}

更不用说像素定位允许您向 图像添加其他状态，而不会影响其他现有状态（例如，如果将它们添加到图像的底部）。当然，当您开始水平添加图像时，这会发生变化。

这是一个很好的参考：http://www.alistapart.com/articles/sprites