css - CSS sprite 之间有推荐的间距吗？

Question

通常，如果我创建 CSS 精灵，我会将它们全部排列在一起，完全没有间距。例如，如果所有图像都是 10x10 像素，我会将它们放在坐标 0,10；0,20; 10,10; 10,20。

但这似乎在某些情况下会引起问题。例如，在页面缩放和移动设备上，您可以看到下一个精灵的边缘。

为什么会出现这个问题，是否与舍入误差有关？简单地在精灵周围添加间距是避免问题的最佳方法吗？如果是这样，我们应该在精灵图像中的图标之间留出最小或推荐的间距吗？

Answer 1

由于舍入，Sprite Bleeding 可能会在缩放时发生，尤其是在 IE 中（旧版本只是简单地舍入到最接近的整数，例如计算值20.343px将呈现为20px）。
由于舍入误差永远不会大于1px，因此在所有边上填充 ，1px您已经可以解决该问题。

现代浏览器使用一种称为亚像素渲染的方法来缓解这个问题。

Answer 2

维护存储在 50px x 50px 或 100px x 100px 盒子中的 CSS sprite 会更容易。

• 它有助于在 sprite 中组织相关图像。
• 您可以复制粘贴以前的样式，只需更改一位数字即可获得新样式。
• 您无需手动找出完美的像素位置。
• 它还可以避免出现问题的情况，有时您无法控制 html 元素的宽度/高度，并且它会显示精灵图像的其他非预期部分。

例如：

div.test {
    background-image: url(image.png);
    background-position: 100px 0px;
}
div.test:hover {
    background-position: 100px 100px; /* Simple relation with previous style */
}

div.box1 {
    background-image: url(image.png);
    background-position: 200px 0px;
}
div.box2 {
    background-image: url(image.png);
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */
}