从sprite推断css中的背景切片

Question

Sprites适用于不改变尺寸的小图标，但我倾向于使用大量1px宽的背景切片来处理按钮和div背景。有没有办法将这些切片包含在精灵中？为了做到这一点，必须有一种方法可以从精灵中取出一小块并在元素的整个背景上进行外推，基本上将其从精灵中切割下来并让它重复，就像它是一个独立的背景图像一样。

Answer 1

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

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

Answer 2

如果我理解正确，Miriam的回答是正确答案。

我将通过几个例子详细阐述Miriam的答案。

这是一个使用按钮的渐变的CSS精灵。

使用CSS background-position来定位您要用于特定按钮的特定渐变。

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

这是一个很棒的工具（像Photoshop一样）来创建渐变，只需复制/粘贴它生成的代码：http://www.colorzilla.com/gradient-editor/

Answer 3

仅方式我可以想到这可能是“SVG堆栈”。基本思想是每个精灵在同一个“平铺”上的不同“层”上，但它们通过SVG文件中的一些CSS隐藏/显示：

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

这里有更深入的解释：http://simurai.com/post/20251013889/svg-stacks

现在，这种方法的缺点是它目前只适用于Mozilla。没关系，我们可以通过使用线性渐变来解决这个问题，以确保除了Mozilla之外的所有人都能获得后备图像：

.element {
    background: url(myBG.png);
    background-image: -moz-linear-gradient(transparent, transparent), url(spriteStack.svg#myBG);
}

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

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

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

如果您希望以任何频率更新此图像，Compass（Sass扩展程序）可以自动为您生成这些图像并缩小CSS（请参阅：http://compass-style.org/reference/compass/helpers/inline-data/#inline-image）。