用雪碧重複背景圖片

我已閱讀過這些線程，但我不知道如何找到答案。用雪碧重複背景圖片

的問題是（身體）：

background: url('image1.png') top left repeat-x, 
     url('image2.png') bottom left repeat-x, 
     #eeeeee;

這工作。

我該如何在精靈中設置這些圖像？因爲我可以得到圖像形式精靈爲：

background-position: -211px -0px; width: 8px; height: 110px;

但我需要從精靈獲得image1.png或image2.png，我還需要在x重複的圖像。例如：

background: url('image1.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
     url('image2.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
     #eeeeee;

我知道這樣做是不可能的。

你能幫我嗎？

在此先感謝

來源

2013-02-04 Carles Costa

我已經嘗試過這之前，我不認爲這是可能的，截至目前爲止。當你使用精靈圖像時，你可以指定它的'x，y，width，height'值。對於重複的圖像，您不需要，因此我認爲最好有2個獨立的圖像，例如'sprite.png'' bg.jpg'。我知道這是一個額外的HTTP請求，但它是一個非常小的請求。有一個名爲'-image-rect'的屬性，但它並沒有被廣泛使用。 – ashley

類似的東西： http://www.phpied.com/background-repeat-and-css-sprites/ 但在這種情況下，對3個的div，我neew爲一體的... 由於阿什利 –

這種技術只允許你「repeat-x」或「repeat-y」。如果你指定了'-x'，那麼你的其他精靈必須在下面，如果你指定'-y'，那麼他們將需要在它旁邊，如果你明白我的意思 – ashley

這是不正確的：

background: url('image1.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
    url('image2.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
    #eeeeee;

相反，你應該這樣寫：

background: url('image1.png') repeat-x -211px -0px/8px 110px, 
    url('image2.png') repeat-x -211px -0px/8px 110px; 
background-color: #eeeeee;

但是，你需要2幅separet圖像，你不能做它與一個精靈。

來源

2013-02-06 08:23:53

用雪碧重複背景圖片

回答

相關問題