使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。
假设我有纸张竖直方向的一张图片，竖直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轴的值即可。
注：需要容器负载图片。
css控制图片显示.rar (1.2 kb)