CSS控制显示图片的一部分_html/css_WEB-ITnose
程序员文章站
2024-02-08 20:18:58
...
使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示。
假设我有纸张竖直方向的一张图片,竖直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)
假设我有纸张竖直方向的一张图片,竖直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编一个表格,想把背景图片加到表头里,而表单的背景是空白的,具体代码和相关信息如下。在线等!_html/css_WEB-ITnose
-
同样的样式,同百分比控制img的高度,在安卓下可以,为什么在ios下就不行呢?_html/css_WEB-ITnose
-
求html中img标签src属性引进的图片(非背景) 怎么样 才能适应不同的分辨率_html/css_WEB-ITnose
-
点击导航菜单,下面就显示菜单的页面,像QQ空间中日志,相册,说说_html/css_WEB-ITnose
-
图片的“background”设置疑问 (100% 速结贴)_html/css_WEB-ITnose
-
iframe 显示空白, 但是这个链连在地址栏是可以正常访问的,请问是什么回事_html/css_WEB-ITnose
-
如何让2个不同的a标签点击时显示不同颜色_html/css_WEB-ITnose
-
我的网站源代码乱码,却网页显示正常,搜狗浏览器可以打开,火狐ie却不能,求救_html/css_WEB-ITnose
-
请问怎样在本页,控制浏览器.要求:不显示菜单栏、不显示地址栏、不显示连接_html/css_WEB-ITnose
-
浏览器图片不显示,myeclipse预览显示_html/css_WEB-ITnose