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

Question

我想创建一些使用CSS精灵和背景位置动态宽度的按钮，但我不知道，如果我想要的是可能的..

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

通常我使用两个图像来获得类似的结果 - 一个用于边，另一个用于中间宽度为1px的图像，但如果有某种方法将它们组合成一个图像，我宁愿使用它。

Answer 1

简短的回答是，这是不可能的（或至少，不值得它99％的时间）与雪碧地图，而不是变化的尺寸。

在大多数情况下，精灵贴图对于背景的重复部分来说并不理想，但对于非重复部分来说非常好。

根据你之后的情况，I'd take a look at the sliding doors approach to the problem，似乎很适合你想要的东西。