CSS Sprites 和重复背景

Posted 2023-03-06

【中文标题】CSS Sprites 和重复背景

【英文标题】：CSS Sprites and repeating backgrounds

【发布时间】：2011-06-30 10:08:26

【问题描述】：

我想将我所有的小图像保存在一个 sprite 文件中，例如：

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

这是否必须作为单独的实体存储，或者我可以以某种方式将其存储在精灵图像中？我不知道是否可以对精灵的一部分进行背景重复，我认为不是，但我很确定我已经在某处看到它。

【参考方案1】：

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

虽然它绝对不是广泛传播或标准的。

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

这样你可以为一个精灵添加多个重复的背景，但使用起来不会那么麻烦。

【讨论】：

（进一步说明：）对于水平和垂直重复的图像，无论如何你都必须自己制作图像，所以那里不可能有精灵。

漂亮的把戏 - 可惜它不适用于你们的浏览器。 -虽然对于进行移动 webkit 开发非常有用-！ （嘘！它只是 FF3.6+，所以对我们来说没有移动 webkit 的好处：（）

【参考方案2】：

您必须将其设置为精灵图像的全宽。否则在重复时可能会泄漏其他图像或空白。

请记住，重复非常小的背景图片（1-2 像素宽）会对性能产生可怕的影响 - 最好使用大一点的图片，因此即使它会很宽 - 实际上它可以更好地呈现页面明智的，然后是 1px 宽的。

编辑：（关于您的编辑）

如果您的元素是固定高度，您可以将其放在您的精灵宽度 100% 宽度的精灵上，并具有所需的元素最大高度。或者，如果您知道它的最大宽度小于精灵的宽度，则将其设为具有元素最大宽度和高度的矩形。

如果你不知道最大高度并且你想把它放在最上面以便渐变缓和成纯色，如果你把你重复的图像放在精灵的最底部并用负定位它可以做到最高值background-position: 0px -300px，其中 300px 是精灵顶部到精灵背景图像顶部的距离。

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

【讨论】：

谢谢汤姆，你有关于细长重复 BG 图像的数字吗？我以前从未听说过这种性能考虑。

哦，真的吗？我从来没想过这点。您是否有在较小的 imgs 上使用重复的性能影响的来源？基准还是……？

我很久以前就读过它——但最近在我的 html5 画布游戏上工作时，我使用了 1px 宽的重复背景图像作为游戏 BG（在 CSS 中作为页面 BG不在画布中），当我使用这个和更大的一个时，游戏中的 FPS 下降了约 20%。当渲染引擎绘制重复的背景时，它必须合成它们，所以这就是它背后的原因 - 我很惊讶性能影响如此之大。它会影响页面上的动画等 - 任何 CPU 重的东西。我会尝试挖掘一些带有数字的文章:)

人们在 cmets 中提到它...仍在寻找数字 :) blog.mozilla.com/webdev/2009/03/27/css-spriting-tips 人们在这里提到它 ***.com/questions/1530299/…

不确定是否存在性能差异，但如果重复图像太小，可能会遇到渲染问题。我曾经回答过一个关于 IE 将背景 1x1 图像渲染为渐变而不是纯色的问题，但我现在找不到它...