从sprite推断css中的背景片段

精灵对于不改变尺寸的小图标来说效果很好，但我倾向于使用很多1px宽的背景片来制作按钮和div背景。有没有办法把这些切片加入精灵？为了做到这一点，必须有一种方法从精灵中取出一小块，并将其外推到元素的整个背景上，基本上是从精灵中剪切下来，让它像一个独立的背景图像一样重复

我能想到的唯一可能的方法是使用“SVG堆栈”。基本思想是，每个精灵位于同一个“瓷砖”上的不同“层”，但它们通过SVG文件中的CSS隐藏/显示：

<style>
  svg .icon { display: none }
  svg .icon:target { display: inline } 
</style>

一旦其他浏览器支持SVG背景上的片段，您就可以为它们添加适当的带前缀的线性渐变

由于您的bg图像很小，我建议使用数据URI。它们看起来像这样：

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");

---

如果您希望以任何频率更新此图像，Compass（Sass扩展）可以自动为您生成这些图像，同时缩小CSS（请参见：）。

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

---

在除旧IE之外的大多数浏览器中，您可以通过CSS创建渐变，而无需使用任何图像。对于旧版本的IE，您必须使用图像

如果我理解正确，米里亚姆的答案是正确的

我将用几个例子详细说明米里亚姆的答案

下面是一个CSS渐变精灵，可以使用按钮

使用CSS背景位置以特定按钮要使用的特定渐变为目标

但是，带有图像的渐变已经过时。对于大多数渐变，您可以简单地使用CSS和IE过滤器来实现相同的结果。即使是非常复杂的渐变也可以使用CSS（即，将退回到标准的“一色对一色”渐变。如果你真的希望IE8用户拥有与现代浏览器相同的视图，你仍然可以使用图像作为后备

---

这里有一个很好的工具（类似photoshop）来创建渐变，并简单地复制/粘贴它生成的代码：

我真的很感兴趣，你可能会使用1x切片，而你不能使用CSS颜色。我将尝试并模拟这个想法。我尝试了一系列具有较新背景属性的东西，但没有成交。

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");