背景图片
CSS控制DIV背景图片显示位置
可能的值
| 值 | 描述 | CSS |
|---|---|---|
| background-color | 规定要使用的背景颜色。 | 1 |
| background-position | 规定背景图像的位置。 | 1 |
| background-size | 规定背景图片的尺寸。 | 3 |
| background-repeat | 规定如何重复背景图像。 | 1 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 规定要使用的背景图像。 | 1 |
| inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
CSS控制显示图片的一部分（来源：http://boonya.iteye.com/blog/1635844）
使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。
假设我有纸张竖直方向的一张图片，竖直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设置只显示图片的一部分（来源：http://blog.csdn.net/zhaoyingjiao/article/details/8983967）
今天模仿网站写页面时，保存一张图片时，发现其他图片都是用的一张整合的图片，前几天都是又把这些图片拆分了。今天因为是演示购物步骤的。我觉得和在一起挺好。就在网上搜了下这个怎么写。发现一个还可以的描述。搜了几个都描述的不清楚。就这个还可以。特意贴上来保存。
原文网址：http://boonya.iteye.com/blog/1635844
CSS 对整合图片中各部分的单独定，在研究其他的网站的样式的时候经常会发现一种情况，就是在很多 background 属性里都调用同一张图片，来满足网页各个部分的使用。
打开这种图片，会发现其中包含很多小图片：
这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的背景图片的定位问题。
我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。
以下为引用内容：
div{ background:#FFF url(image) no-repeat fixed x y;}
这里的background的属性值依次为：
#FFF 背景色：（颜色值，背景图片没有覆盖的地方，或者没有背景图片时表现的背景色）
image 背景图片：（这里是图片的地址）
no-repeat <是否重复：（图片小于容器的大小时，默认会重复排列图片以填满容器，no-repeat表示不重复，只有这个时候后面的定位坐标才有用。）
fixed 背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认是scroll）
x y 背景图像的定位：（注意，只有在no-repeat下定位才有意义。这个就是今天要讲的重点）
背景图像定位中我们要明确的几点：
1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。
2、坐标轴的原点就是对应容器的左顶点。
3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。
这是我自己做的页面：
我用的整合图片
：
我的css代码：<div style="width:479px;height:50px;border:0px solid red;background:#FFF url(images/step.gif) no-repeat;float:left;margin-left:10px;margin-top:13px;background-attachment:fixed;background-position:435px 50px;"></div>
这个应该是相对于我的div的左上角开始算像素，图片也是从左上角开始算像素。比如我这张图片大小是479px*150px。我容器div的大小是479px*50px;所以我的css是background-position:435px 50px;
其实以上的做法会导致图片跟着滚动，一滚动就看不到要显示的部分，在发现这个问题之后，我又查了网上的做法，发现以下的属性可以不让图片滚动还是给大家传一个网上的例子大家可以下载下来看看。
这是完整的html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
border:0;
margin:0;
padding:0;
}
#div1 {
background:url(21321321321.jpg) no-repeat; /* 从左上角的0 0点开始 */
height:40px; /* 第一张图片的高度 */
width:120px; /* 第一张图片的宽度 */
}
#div2 {
background:url(21321321321.jpg) -120px 0 no-repeat; /* 从左上角的-120px 0点开始,负数不明白?自己试试就知道了 */
height:70px; /* 第二张图片的高度 */
width:129px; /* 第二张图片的高度 */
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
下面是用到的图片，