从精灵外推css中的背景切片

Question

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

Answer 1

我能想到的唯一方法是使用“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 背景上的片段，您就可以为它们添加适当的前缀线性渐变。

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

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

如果您希望以任何频率更新此图像，Compass（Sass 扩展）可以自动为您生成这些图像，同时缩小您的 CSS（请参阅：http ://compass-style.org/reference/compass/helpers/内联数据/#内联图像）。