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

ttx9n · 发表于 2014-10-15 17:35:55

采用一张图片多种效果或内容显示，这时就可以使用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轴的值即可。
注：需要容器负载图片。

ppwxcg · 发表于 2022-10-1 17:35:11

非常vbcbvcvbvcb

4k0mp7m · 发表于 2022-12-29 23:16:47

还有人在不。。。。。。。。。。啊

4k0mp7m · 发表于 2023-1-8 22:47:55

强烈支持楼主ing……

6q8s6p21 · 发表于 2023-1-10 08:58:00

收下来看看怎么样

czoz5y · 发表于 2023-1-20 02:03:16

额头额定法国队是范德萨

fzyzy · 发表于 2023-6-27 16:30:59

哈哈哈哈哈哈

9jduu05 · 发表于 2023-7-23 19:36:09

vcxvcxv

0608fv3 · 发表于 2023-8-31 15:30:25

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

wqpa63gz · 发表于 2023-9-11 04:40:40

老衲笑纳了

账号		自动登录	找回密码
密码			立即注册

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

相关帖子