如何使用CSS精靈

Question

我有一個精靈，我想用定義一個類，而不是一個ID：

我想用白色的顯示擴展選件和黑色的顯示擴展狀態。對於非展開狀態，我有一個類sprite-right，並且想要使用sprite-expanded展開狀態。任何人都可以引導我通過這個？我忘了粘貼我做了什麼......呃！

sprite-right 
{ 
    overflow:hidden; 
    width:16px; 
    height:20px; 
    cursor:pointer; 
    background:transparent no-repeat 0 0; 
    background-image:url('../images/arrows.gif'); 
} 

Answer 1

設置起來非常簡單。你首先需要設置一個將圖像作爲背景的類。然後爲每個圖標添加特定的類。然後在你的CSS中改變背景的位置，高度和寬度以匹配每個圖標的位置。這裏有一個例子：

.icon { 
    background-image: url('path/to/image.png'); 
    display: block; 
} 

.icon.sprite-right { 
    background-position: 0 0; 
    height: 10px; // You can change these for each sprite 
    width: 10px; // You can change these for each sprite 
} 
.icon.sprite-expanded { 
    background-position: -10px 0; 
} 
.icon.sprite-right:hover { 
    background-position: -20px 0; 
} 
.icon.sprite-expanded:hover { 
    background-position: -30px 0; 
} 

然後，當你添加新的精靈，你只需調整位置，直到你可以看到圖標，然後調節高度和寬度，直到你沒有限幅圖像。

Answer 2

如果您進行Google搜索，那裏有很多優秀的教程。處理簡單的精靈時，我使用這個工具很多。

退房此鏈接：http://labs.engageinteractive.co.uk/nav-o-matic/

這裏是一個codepen我分叉，所以我可以理解精靈好一點。

http://codepen.io/daugaard47/pen/lntzE

研究的代碼，它會開始做你有意義。 使用背景定位將你的精靈移動到所需的類別/狀態。

希望這會有所幫助。

Answer 3

這篇文章應該幫助：http://mindthesemicolon.com/using-css-sprites/ 它解釋瞭如何使用代碼筆示例創建和使用精靈。