CSS Sprite 重复整个 Sprite

Question

这可能是个愚蠢的问题，但如果有人能帮助我，我将不胜感激。

我有一个由 3 个垂直堆叠的不同图像组成的 Sprite ，但我试图让中间的图像(高度为 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>

菜单图片:

(如果有帮助， map 尺寸如下:top->194x21, middle->194x1 & bottom->194x10)

实际结果和目标:

我正在学习 sprite 贴图，它有时会让人感到困惑，因此非常感谢任何帮助，并提前感谢人们可以提供的任何帮助。

Answer 1

您不能重复图像的一部分，您只能重复整个高度(或整个宽度，或两者)。

将三张图片并排放置，得到一张 582x21 的 Sprite 图片，并使中间图片填充 Sprite 图片的高度。

然后你可以重复中间部分，因为它重复了 Sprite 图像的整个高度:

.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;
}