如何使用背景位置和 CSS 精灵重复图像的一部分？

Question

我想使用 CSS 精灵和背景位置创建一些具有动态宽度的按钮，但我不确定我想要的是否可行..

我希望按钮有左侧、中间和右侧，中间根据需要重复。理想情况下，我希望它由一个 11 像素宽的图像组成，因此左侧和右侧都是 5 像素宽，中间是 1 像素重复。有什么方法可以在 CSS 中定义以使用图像的一个中心像素并在需要（未知）宽度时重复？

通常我会使用两张图片来获得相似的结果 - 一张用于侧面，另一张宽度为 1px 的图片用于中间，但如果有某种方法可以将它们组合成一张图片，我更愿意使用它。

Answer 1

简短的回答是，这不可能（或者至少 99% 的时间不值得）使用精灵贴图，而不是使用不同的尺寸。

在大多数情况下，sprite-map 并不适合背景的重复部分，尽管它非常适合非重复部分。

不过，根据您所追求的，I'd take a look at the sliding doors approach to the problem 似乎非常符合您的要求。