源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 214|回复: 23

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 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轴的值即可。
注:需要容器负载图片。
回复

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2022-10-1 17:35:11 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2022-12-29 23:16:47 | 显示全部楼层
还有人在不。。。。。。。。。。啊
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-1-8 22:47:55 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-10 08:58:00 | 显示全部楼层
收下来看看怎么样
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2023-1-20 02:03:16 | 显示全部楼层
额头额定法国队是范德萨
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-27 16:30:59 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-7-23 19:36:09 | 显示全部楼层
vcxvcxv
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-31 15:30:25 | 显示全部楼层
给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2023-9-11 04:40:40 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 17:04 , Processed in 0.071749 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表