最近，因为项目原因在学习CSS,做前台页面，正好可以把CSS练练。原来看过两本书，但是练的少，难免有些生疏。所以程序员光看书不练，还是不行的。
一开始就遇到问题，背景图片不能居中！因为现在显示器的分辨率的差异，特别是宽屏，如果固定宽度居中，比如到时候不同的用户看肯定会出问题，所以如果背景能根据显示宽度来居中是理想的，当然CSS中也这个功能就是Background-Position。
最近，因为项目原因在学习CSS,做前台页面，正好可以把CSS练练。原来看过两本书，但是练的少，难免有些生疏。所以程序员光看书不练，还是不行的。
一开始就遇到问题，背景图片不能居中！因为现在显示器的分辨率的差异，特别是宽屏，如果固定宽度居中，比如到时候不同的用户看肯定会出问题，所以如果背景能根据显示宽度来居中是理想的，当然CSS中也这个功能就是Background-Position。
可以通过背景定位属性来定义背景图片的位置：background-position,使用背景定位的属性值有下面几种,如果不使用,默认位置是从页面左上角0位置开始：
background-position:＜percentage＞使用百分点定位,0% 0%是指图片左上角与页面左上角对齐；如果是100% 100%，则表示图片右下角与页面右下角对齐。两个百分数用空格分开。
background-position＜length＞使用长度单位，如2cm、5cm，表示图片距左2cm，距上5cm，两个数据用空格分开:
background-position:top／center／bottom 分别表示图片在网页的顶、中、底位置 background-position:left/center/right 分别表示图片在网页的左、中、右位置。
其中要注意的是在使用百分点和长度时,如果只有一个数据的时候．只表示水平方向的位置。
使用它们的位置参数时，可以部分混用，如“7cm 40%”或“20% 4cm”，但绝不能把百分点或长度与位置属性混用，像“1cm top”这样是不允许的。
有时会出现不能居中的情况，只是因为你把页面宽度给它定死了，所以要居中显示，它不知道怎么弄了，所以Background-Position失效了，只要把width改成100%就Ok了。
Background-Position用法还有很神奇很强大。有些网页上的很多相关图片放到一张图片里显示，让一张图片一次加载到客户端这样也可以节约传输的大小，这也就是经常说的CSS切割术，它就是用Background-Position这把手术刀来分割的。具体怎么用呢，下面介绍下：
1.要分割的背景图
2.我们开始写显示的html
Code
<!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">
#guide li
{
text-align: center;
text-decoration: none;
list-style-type: none;
float: left;
}
#guide li .profile
{
margin-top: 15px;
margin-left:15px;
background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll 0px 0px;
height: 48px;
width: 48px;
}
#guide li .blog
{
margin-top: 15px;
margin-left:15px;
background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll -49px 0px;
height: 48px;
width: 48px;
}
#guide li .photo
{
margin-top: 15px;
margin-left:15px;
background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll -98px 0px;
height: 48px;
width: 48px;
}
#guide li .friend
{
margin-top: 15px;
margin-left:15px;
background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll -162px 0px;
height: 48px;
width: 48px;
}
#guide li .file
{
margin-top: 15px;
margin-left:15px;
background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll -267px 0px;
height: 48px;
width: 48px;
}
#guide li .webarticle
{
margin-top: 15px;
margin-left:15px;
background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll -211px 0px;
height: 48px;
width: 48px;
}
</style>
</head>
<body>
<div id="guide">
<ul>
<li >
<div class="profile"></div>档案
</li>
<li ><div class="blog"></div>博客</li>
<li><div class="photo"></div>相册</li>
<li><div class="friend"></div>朋友</li>
<li><div class="webarticle"></div>网摘</li>
<li><div class="file"></div>文件</li>
</ul>
</div>
</body>
</html>
可以看出关键在于background属性最后的两个属性值，一个是background-attachment设置成scroll,最后一个值就是background-position的x，y方向的值，左上角是0，0，往下截取的话，就减值，所以图片一定得做好，清楚你要截取的图片的大小，这样你才能控制好你要截取的图片。这里blog图片就是x方向-49，y方向不变，所以不变是0。
最后看看效果图：
