CSS background 控制显示图片的一部分

当前位置 : 首页 > 网页制作 > CSS > CSS background 控制显示图片的一部分

CSS background 控制显示图片的一部分

来源: 作者: 时间:2015-10-30 09:30
采用一张图片多种效果或内容显示,这时就可以使用background进行定位控制显示图片的某一部分,实现代码如下,从事web前端的朋友可以看看
采用一张图片多种效果或内容显示,这时就可以使用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轴的值即可。
注:需要容器负载图片。
Tag:
网友评论

<