使用情形：防止反復(fù)請(qǐng)求圖片資源，我們經(jīng)常采用一張圖片多種效果或內(nèi)容顯示。
假設(shè)我有紙張豎直方向的一張圖片，豎直y軸方向分別是字母：A,B,C….
現(xiàn)在分別要顯示A、B、C 等字母，我們的CSS可以這么寫(xiě)：
這里圖片一個(gè)字母所占的width=20px,height=20px;

復(fù)制代碼代碼如下:
.mar_wordA {
background: url(“../images/ranking.gif”) no-repeat scroll 0 0px transparent;
}
.mar_wordB {
background: url(“../images/ranking.gif”) no-repeat scroll 0 -20px transparent;
}
.mar_wordC {
background: url(“../images/ranking.gif”) no-repeat scroll 0 -40px transparent;
}

若果是水平方向的圖片，調(diào)整x軸的值即可。
注：需要容器負(fù)載圖片。