如何使用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，似乎很適合你想要的東西。