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

Question

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

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

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

Answer 1

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

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

不过，根据您所追求的，我会看看解决问题的推拉门方法，似乎非常适合您想要的。