CSS background 控制显示图片的一部分
CSS background 控制显示图片的一部分
发布时间:2016-12-27 来源:查字典编辑
摘要:使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示。假设我有纸张竖直方向的一张图片,竖直y轴方向分别是字母:A,B,C....

使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示。

假设我有纸张竖直方向的一张图片,竖直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轴的值即可。

注:需要容器负载图片。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类