CSS：將圖像從圖像中的指定位置重複到另一個指定位置

Question

我有一個尺寸爲36px（高度）和32px（寬度）的圖像。我正在訪問第一個也是最後一個5個像素

background-position: 0 0; 
background-position: -26px 0px; 

這些被放到兩個不同的div，寬度爲5px。總共我有三個div（左，中，右）

我現在想使用圖像的中間部分重複自身，寬度爲280px。但是，我只想訪問6px - 26px之間的圖像區域。

IMAGE：

5px  22px 5px 
=== =========== === 

我想CSS的事：

DIV

5px     280px      5px 
=== ============================================ === 

注：280像素只有沿X上面的圖片中重複的22px的區域！

Answer 1

你有你的精靈的佈局更改爲類似如下：

----------------------- 
-Left Part Right Part- 
-  Middle Part  - 
----------------------- 

這樣一來，你會改變y統籌的background-image的中間部分，它應該重複成功地。

這是因爲您無法重複background-image的特定部分。在這種情況下，寬度/高度必須是固定的，因爲一旦你重複了一部分，你會看到精靈的其他部分。