css - 如何在 CSS 中实现无填充精灵？

Question

在学习如何使用 css sprite 时，我很快注意到和/或读到最好在 sprite 内的所有图像之间留出 1 或 2 个空白像素空间，以避免在用户放大或缩小时其他图像渗出。

在查看苹果主页时，我注意到他们不这样做，而不会出现图像出血。我没有在他们的 CSS 中找到任何可以解释这一点的理由。

这怎么可能？;)

Answer 1

如果您确切知道包含元素的大小，则不需要在精灵之间进行填充。当元素内部的某些东西导致它增长时，问题就出现了。例如，如果该元素内的文本必须使用后备字体，则可能最终导致容器增长。

推荐精灵之间的填充的原因是它没有真正的缺点。它不会以任何有意义的数量增加文件大小，并且当浏览器执行的操作与您预期的略有不同时，它会为您提供一点安全余量。

Answer 2

看起来确实有必要，因为当浏览器认为有必要缩放裁剪区域时（例如，如果放大或缩小或动画临时更改大小），浏览器将使用抗锯齿来平滑缩放的图像. 由于抗锯齿使用周围的像素，裁剪区域最外侧的像素将受到裁剪区域之外的像素的影响。透明填充确保不会发生这种情况，因为透明填充不会影响结果颜色。如果没有填充，裁剪后的图片会相互影响。

这可以通过用洋红色之类的颜色填充（理论上不可见的）填充区域来轻松测试，然后放大或缩小一个页面，所有作物的边缘都会有一点洋红色。