Spriting in CSS

Question

我是新來的CSS和我試圖在CSS中的圖像spriting。目前我有一張精靈地圖。有多個CSS文件使用@import從我的主CSS進行級聯。每個CSS文件都定義了各種組件的佈局。我只需要對我的精靈圖像進行一次調用，因此我需要使用背景位置進行遊戲。 任何人都可以告訴我一種方式，使我只對圖像進行一次調用，而其餘的CSS文件只是操縱位置？

Answer 1

給你的元素同一類精靈，然後覆蓋它們：

.sprite { background: transparent url(../images/sprite.png) no-repeat top left; } 

.add_icon { background-position: 20px 60px; } 
.next_icon { background-position: 40px 60px; } 

<div class="sprite add_icon"> etc. 

等..

Answer 2

您將需要多個類的工作。

在第一堂課（讓我們稱之爲.sprite），你必須定義背景圖像。

.sprite { 
    background: transparent url(path/to/image) no-repeat 0 0; 
    height: 16px; 
    width: 16px; //assuming you are using this size for your icons... 
} 

現在您將不得不爲每個將要使用的精靈圖像定義另一個類。

例如，您有一個放大鏡圖標，您將添加一個類.sprite .magnifier，您將不得不定義背景位置。

.sprite.magnifier { 
    background-position: 45px 30px; 
} 

現在在你的HTML你只需要調用的<div class="sprite magnifier"></div>和你的形象將加載只是一個時間。

Answer 3

有各種各樣sprite generators。或者您可以使用某種圖像處理軟件創建自己的圖像。

您需要將所有圖像保存爲一個.png（通常），並且元素之間有足夠的間距。

然後根據您的個人需求，您可以可以設置說所有元素的背景，作爲您的精靈，但這可能會導致問題。

它遠遠不如說〜

ul.foo li { 
    background:url(my-sprite.png); 
} 

ul.foo li.home { 
    background-position:0 10px; 
} 
ul.foo li.about { 
    background-position:10px 20px; 
} 

和風格各要素的要求。精靈仍將只加載一次。

你不應該使用精靈爲大量的大圖像 - 最適合圖標，按鈕等。請參閱YouTube，谷歌，堆棧溢出爲好的例子。