如何使用background-position和CSS sprites重复部分图像？

Question

我想使用CSS sprites和background-position创建一些动态宽度的按钮，但我不确定我想要的是否可能..

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

通常情况下，我使用了两张图片来获得类似的效果 - 一张用于侧面，另一张用于中间宽度为1px的图像，但是如果有一种方法可以将它们组合成一张图像，我宁愿使用它。

Answer 1

简短的回答是这是不可能的（或至少，99％的时候不值得）精灵地图，而不是不同的尺寸。

在大多数情况下，精灵图不适合背景的重复部分，尽管它非常适合非重复部分。

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