http://www.jcwcn.com/article-10563-1

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

我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多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下定位才有意义。这个就是今天要讲的重点）