html - 剪掉图像的中间部分(示例所示)？

Question

这是我看到 Grooveshark 所做的事情，它消除了为可扩展按钮等使用多个图像的需要。

基本上，像这样的图像

用于生成任何宽度小于图像本身的按钮。我假设这是通过以某种方式修剪中间来完成的，但我不确定如何。我查看了 CSS 属性的用法 here 但似乎无法找出除了两侧的 15px 填充之外做了什么。

有谁知道如何复制相同的效果？

编辑:为了清楚起见，我说的是剪掉单个按钮的中间部分(我确实意识到我已经给出了 4 种按钮样式的 sprite 图片，所以它可能当我说“剪掉图像的中间部分”时会让人感到困惑)。

Answer 1

您所说的是 sliding doors技术。通过将背景图像应用于容器元素以显示左边缘，然后您可以将同一图像应用于仅显示右边缘的另一个元素。

例如:

.menu li {
  background: url(button-sprite.png) 0 0 no-repeat;
  padding-left: 10px;
}

.menu li a {
  background: url(button-sprite.png) 100% 0 no-repeat;
  display: block;
}

列表项显示图像的左边缘。当另一个元素位于顶部时，填充允许显示左边缘。

anchor 元素显示图像的右边缘，并裁剪到文本内容所需的宽度。