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

Question

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

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

怎么可能？ ;）

Answer 1

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

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

Answer 2

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

通过在（理论上不可见的）填充区域填充洋红色等颜色，然后在一页的页面中放大或缩小，可以很容易地测试这一点，所有作物的边缘都会有一点品红色。