css教程:背景图片的定位问题详解

添加时间:17-04-21 所属分类:HTML网页,JS语言与代码
  http://www.jcwcn.com/article-10563-1.html

在学习中遇到问题可以到 论坛 发贴交流!

我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包含了很多小图片,比如:



又如:


这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽。

那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下:

我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body、td、p等的背景,道理一样。
[code]div{ background:#FFF url(image) no-repeat fixed x y;}[/code]
这里的background的属性值依次为:

#FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
image 背景图片:(这里是图片的地址)
no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)
  • 2
  • 3

前篇:一位用手走路的女人养活了一个村子 后篇:首届环湖越野行走大会在大明湖举行 意在展示...
发表我的评论


推荐文章   天使不放弃!无臂幼童成功用脚将食物送...   一家四口30年省吃俭用捐出600多万做公益   20年前济南人的生活才叫生活,现在只能...   妈妈为女儿列相亲预约表 被吐槽像福布斯...   87岁退休教师变卖上海唯一房产 捐建希望...
随机文章   使用Bing翻译窗口小部件或Google Websi...   JS判断手机访问WWW自动跳转到的M的对应...   鼠标经过时TAB菜单切换javascript特效   三种方法鼠标经过改变DIV背景颜色   【CSS】三列布局(左右div固定宽度,中...
广告

其他推荐

因为本站所有内容均转载自其它媒体,本意为公众提供免费服务,但并不代表本网赞同其观点,也不能对其真实性验证负责,如稿件版权单位或个人不想在本网发布,请与我联系,本人会立即将其撤除,谢谢.联系方式:atseashawk@163.com QQ:99289555