6

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

4

3 回答 3

1

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

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

于 2013-02-16T03:20:27.743 回答
1

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

我将通过几个示例详细说明 Miriam 的答案。

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

CSS 渐变精灵

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

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

这是一个很棒的工具（类似于 photoshop），可以创建渐变并简单地复制/粘贴它生成的代码：http: //www.colorzilla.com/gradient-editor/

于 2013-02-21T10:05:15.650 回答
0

我能想到的唯一方法是使用“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-image）。

于 2012-12-30T02:04:11.697 回答