Html 如何仅重复我的精灵图像的一部分作为div的背景

我只需要将精灵图像的一部分作为div背景，但结果如下：

我假装：

我需要，在我的模板中只使用一个精灵图像（老板的要求）。我需要帮助

我的html：

<div class="background"></div>

---

不幸的是，如果要同时重复x和y，就必须创建一个单独的文件。如果你想要x或y，你可以使用下面的答案来帮助指导你

重复-X：将这些垂直堆叠在精灵表中。你 每个“行”只能有一个图像。所有图像必须具有相同的属性 宽度

重复y：将图像水平排列，并且只有一个图像 每个“列”的图像。所有图像必须具有相同的高度

---

它不应该对加载时间造成太大的伤害

只能在一个方向上重复精灵

要水平重复精灵，您需要编辑精灵，以便要重复的图像位于其他图像的下方，而两侧没有任何其他内容

---

然后，您提供的代码应该可以工作（改变位置以适应）。

是一个很好的工具来帮助您，您可以选择重复x或y，并且可以对任意多的图像执行该操作。

没问题，希望有帮助。

.background {width: 100%; 
             height: 166px; 
             background-size: 93px 166px; 
             background: url('library/images/sprites.png') -150px 0px repeat-x; 
            }