css - 从 sprite 推断 css 中的背景切片

Question

Sprites 适用于尺寸不变的小图标，但我倾向于为按钮和 div 背景等使用大量 1px 宽的背景切片。有什么办法可以将这些切片包含到 Sprite 中吗？为此，必须有一种方法可以从 sprite 中取出一小块并将其外推到元素的整个背景上，本质上是将其从 sprite 中剪切下来并让它像独立的背景图像一样重复。

Answer 1

听起来您正在使用 1px 宽的图像进行渐变。我猜你只想在一个方向上重复图像，而不是两个方向。如果是这种情况，您可以制作一个 1px 宽图像的 Sprite 。诀窍是根据重复图像的方向布置 Sprite 。还要注意将它们放置在右侧还是底部，例如，如果您的渐变应该位于容器的底部，您可能希望将该渐变放置在 Sprite 的底部。如果所有图像都水平重复，则可以将它们放在一个文件之上。我喜欢图像之间有一些透明度，要么用网格线将它们对齐，要么留出足够的空间，这样其他图像就不会显示。

在除旧版 IE 之外的大多数浏览器中，您可以在不使用任何图像的情况下通过 CSS 创建渐变。对于旧版本的 IE，您将不得不使用图像。