CSS background 控制显示图片的一部分
发布时间：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轴的值即可。
注：需要容器负载图片。
假设我有纸张竖直方向的一张图片，竖直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全部汇总。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-19
CSS的background属性及CSS3的背景图片设置总结
这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下2016-06-13- 边框在Web页面的内容块中非常常用,这里为大家整理了CSS制作边框效果的技巧总结,尤其是第三种方案的background-origin利用十分讨巧,需要的朋友可以参考下2016-05-27
- 固定背景图片的通常方法就是把background-attachment设成fix,进一步的话自然则是用background-position,下面来详解使用CSS固定页面背景图片及位置的方法:2016-05-17
- 这篇文章主要介绍了使用CSS3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下2015-08-24
- 这篇文章主要介绍了CSS3属性background-size使用指南,需要的朋友可以参考下2014-12-09
CSS背景background、background-position使用详解
这篇文章主要介绍了CSS背景background、background-position使用方法,需要的朋友可以参考下2014-10-22- background-size可以设置2个值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，不了解的朋友可以参考下2014-09-24
纯css实现元素下出现横线动画（background-image）
这篇文章主要介绍了纯css实现元素下出现横线动画（background-image）的相关资料,需要的朋友可以参考下2018-12-06
最新评论