html - 使用精灵作为背景

Question

我目前有以下内容：

html {
    background-image: url('../bundles/app/img/bg-tile-main.png');
}

现在因为我已经将 bg-tile-main.png 放入了一个精灵.. 我怎么能有和上面一样的效果？据我研究，我在使用精灵时不能重复背景？

Answer 1

你还不能这样做，将来你将被允许使用

background:image-rect(url('img.png'), 16, 16, 16, 16) repeat top left;

目前只有 Firefox 支持

更多信息在这里：

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect

MDN 上的示例：

https://developer.mozilla.org/samples/cssref/moz-image-rect/（仅适用于FF atm）

Answer 2

连同background-image，你需要给background-position. 然后，您可以在 spritesheet 中重复特定图像。

要获得职位，请使用spritecow，一个在线工具。

更新：

这是我的精灵图像

#rr {
    background: url('http://files.simurai.com/misc/sprite.png') repeat-y -257px -8px;
    width: 40px;
    height: 661px;
}

JSFiddle

仅供参考：哪里repeat-x不起作用，因为宽度覆盖了指定的图像。

background-position这是关于重复、 背景重复和 CSS 精灵的一个非常棒的内容

规则非常简单：如果您希望背景垂直重复（从上到下），请将图像水平放置在精灵中（从左到右），并确保精灵中的各个图像具有相同的高度。对于相反的情况：当你想水平重复时，垂直精灵。