css background属性控制显示图片部分内容

发布时间:2019-08-01编辑:脚本学堂
有关css中用background属性控制显示图片一部分内容的方法,采用一张图片多种效果或内容显示,需要的朋友参考下。

为了防止反复请求图片资源,经常采用一张图片多种效果或内容显示。
假设,有纸张竖直方向的一张图片,竖直y轴方向分别是字母:A,B,C....

分别要显示A、B、C 等字母,CSS可以这么写:
图片一个字母所占的width=20px,height=20px;

css样式代码:
 

.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轴的值即可。
注意:需要容器负载图片。