首页 > 代码库 > CSS控制显示图片的一部分

CSS控制显示图片的一部分

使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片,竖直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)

CSS控制显示图片的一部分