CSS Sprites和重复背景

Question

我想将所有小图片保存在一个精灵文件中，例如：

现在假设我要添加一个薄的背景图像，它意味着重复x超过元素宽度的100％：

这是否必须存储为单独的实体，还是可以以某种方式将其存储在精灵图像中？如果可以对精灵的一部分进行背景重复，我想不行，我想不是，但我很确定我已经看到它在某个地方完成了。

Answer 1

我不确定这是否已经在CSS3中，但Gecko引擎（Firefox 4 ...）将image-rect添加为-moz-image-rect，这允许您选择图像的特定部分以供使用。有了它，您可以选择精灵的一部分作为背景图像，然后重复它。

但它绝对不是广泛传播或标准化。

我喜欢做的是做3种精灵。一个带有图标，根本不使用重复，一个用于水平重复图像，一个用于垂直重复图像。

这样你可以为一个精灵添加几个重复背景，但没有那么麻烦使用它。

Answer 2

你必须使它成为精灵图像的全宽。否则在重复时可能会泄漏其他图像或空白区域。

请记住，重复非常小的背景图像（1-2px宽）会对性能造成严重影响 - 使用更大的图像总是更好，所以即使它很宽 - 它实际上可以更好地进行页面渲染明智然后1px宽一。

编辑:(关于你的编辑）

如果你的元素是固定高度，你可以将它放在精灵宽度为精灵的100％宽度上，并使用所需的元素最大高度。或者，如果您知道它的最大宽度小于精灵的宽度，那么使它成为一个矩形，其中包含元素的最大宽度和高度。

如果您不知道最大高度，并且想要将其置于最顶部，以便渐变变为纯色，则可以将重复图像放在精灵的最底部并将其置于负值最高值background-position: 0px -300px其中300px是从精灵顶部到精灵背景图像顶部的距离。

看看谷歌如何在精灵上重复BG：