采用一張圖片多種效果或內容顯示，這時就可以使用background進行定位控制顯示圖片的某一部分，實現代碼如下，從事web前端的朋友可以看看
使用情形：防止反復請求圖片資源，我們經常采用一張圖片多種效果或內容顯示。
假設我有紙張豎直方向的一張圖片，豎直y軸方向分別是字母：A,B,C....
現在分別要顯示A、B、C 等字母，我們的CSS可以這麼寫：
這裡圖片一個字母所占的width=20px,height=20px;
復制代碼代碼如下:
.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;
}
若果是水平方向的圖片，調整x軸的值即可。
注：需要容器負載圖片。