手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS background 控制显示图片的一部分
CSS background 控制显示图片的一部分
摘要:使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示。假设我有纸张竖直方向的一张图片,竖直y轴方向分别是字母:A,B,C....

使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示。

假设我有纸张竖直方向的一张图片,竖直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 background 控制显示图片的一部分】相关文章:

CSS样式:background-position的理解

CSS+DIV制作梯形状的不规则网站导航

CSS截取字符串显示省略号

CSS background属性(背景属性)详解

页面背景图片的拉伸实现代码

css中background-size属性使用介绍

CSS兼容方案最新的一些技巧

CSS样式表使用的技巧

ie8下不解析background属性与书写格式有关

CSS控制DIV绝对定位、相对定位的技巧

精品推荐
分类导航