您现在的位置： 365建站网 > 365文章 > CSS切割术的手术刀Background-Position

CSS切割术的手术刀Background-Position

文章来源：365jz.com 点击数：852 更新时间：2009-09-16 11:40 参与评论

     最近，因为项目原因在学习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

         可以看出关键在于background属性最后的两个属性值，一个是background-attachment设置成scroll,最后一个值就是background-position的x，y方向的值，左上角是0，0，往下截取的话，就减值，所以图片一定得做好，清楚你要截取的图片的大小，这样你才能控制好你要截取的图片。这里blog图片就是x方向-49，y方向不变，所以不变是0。
          最后看看效果图：