div+css 如何取图片中的某区域显示?

发布网友发布时间：2022-04-21 03:28

共3个回答

懂视网时间：2022-04-21 07:50

使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。
假设我有纸张竖直方向的一张图片，竖直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轴的值即可。
注：需要容器负载图片。

CSS控制图片显示.rar (1.2 KB)

热心网友时间：2022-04-21 04:58

.div{background:url("00,gof")
-40px
-20px
no-repeat;}
你是想把某一个小图拿来做图标对吧？假如第二行的第二个小图的最左上角的坐标为-40px
-20px的话，那么上面的写法，他的背景就是显示第二行的第二个小图了。

热心网友时间：2022-04-21 06:16

没有直接的办法，你有2个选择：
1.用这个图片做背景，然后控制用它做背景的层的大小和背景的位置(backgroung-position)。
2.在一个层中显示图片，然后再用其他的层覆盖不需要的位置。