Html 使用sprite作为背景

我目前有以下情况：

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

---

现在既然我已经把bg-tile-main.png放进了一个精灵。。我怎样才能达到与上述相同的效果？据我研究，在使用sprite时，我不能重复背景？

以及

背景图像

，您需要给出

背景位置

。然后可以在精灵表中重复特定图像

要获得职位，请使用在线工具

更新：

这是我的精灵形象

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

仅供参考：其中

repeat-x

不起作用，因为宽度覆盖了指定的图像

这里有一个关于重复

背景位置的非常好的例子

，

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

---

你还不能这么做，将来你可以使用

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

目前只支持Firefox

更多信息请点击此处：

有关MDN的示例：

---

（仅适用于FF atm）

您能更清楚地解释一下吗-可能使用JSFIDLE？如何在精灵表中重复特定图像？示例？@adit我添加了一个示例，请仔细阅读。