CSS精灵重复整个精灵

这也许是个愚蠢的问题，但如果有人能帮助我，我会非常感激

我有一个精灵，由3个不同的图像垂直堆叠而成，但我试图让中间的一个（高度为1px，宽度为194）重复，只是那条1px线，虽然当我称之为它时，它只是重复了整个事情，标题和：after很好，但是它只是一个令人痛苦的部分

<style>
.menu {
width: 194px;
background: url('menu.png') 0 -21px
}
.menu .title {
background: url('menu.png') 0 0;
width: 194px;
}
.menu:after {
display: block;
content: "";
background: url('menu.png') 0 -22px;
width: 194px;
height: 10px;
}
</style>

<div class="menu">
<div class="title">[Title]</div>
This is some text here to test the element.
</div>

.菜单{
宽度：194px；
背景：url（'menu.png'）0-21px
}
.菜单.标题{
背景：url（'menu.png'）0；
宽度：194px；
}
.菜单：之后{
显示：块；
内容：“；
背景：url（'menu.png'）0-22px；
宽度：194px；
高度：10px；
}
[标题]
这是一些测试元素的文本。

菜单图像：

（如果有帮助，地图的大小如下：顶部->194x21，中部->194x1&底部->194x10）

实际成果和目标：

---

我正在学习精灵地图，它有时会让人困惑，因此我们非常感谢您的帮助，并提前感谢您提供的帮助。

您不能重复图像的一部分，只能重复整个高度（或全宽，或两者兼而有之）

将这三个图像并排放置，以便获得582x21的精灵图像，并使中间图像填充精灵图像的高度

然后可以重复中间部分，因为它重复精灵图像的整个高度：

.menu {
  width: 194px;
  background: url('menu.png') -194px 0;
}
.menu .title {
  background: url('menu.png') 0 0;
  width: 194px;
}
.menu:after {
  display: block;
  content: "";
  background: url('menu.png') -388px 0;
  width: 194px;
  height: 10px;
}

---

也许你可以将高度：1px添加到.menu类？@cyan我在发布之前已经尝试过了，但它只是将div的高度限制为1px，理想情况下，我只需要找到一种方法来重复一个特定的像素线，而不重复其余的像素线，但老实说，我不知道该怎么做，也不希望为了达到这个效果而包含另一个图像，除非我真的必须这样做。