div+css背景图片定位解析

今天有同行问我这个，我当时挺迷茫的，css背景图片定位没什么难的啊，怎么还问这个！
好了，问到了，那就再温习一下，对div+css背景图片定位做一个解析。

1. 关键字, 例如: background-position: top right;
   　　优点: 直观, 可用性高, 各浏览器中表现一致.

　　缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的(left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.

/*盒子的css样式*/
#box{width:500px;height:180px;border:1px #ccc solid;}
/*全部重复背景*/
.repeat{background:url(bg.gif);}
/*水平方向重复*/
.repeatx{background:url(bg.gif) repeat-x;}
/*垂直方向重复*/
.repeaty{background:url(bg.gif) repeat-y;}
/*背景不重复*/
.norepeat{background:url(bg.gif) no-repeat;}
/*背景左侧中间对齐*/
.left{background:url(bg.gif) no-repeat left center;}
/*背景右侧中间对齐*/
.right{background:url(bg.gif) no-repeat right center;}
/*图片背景水平方向和垂直方向都居中*/
.center{background:url(bg.gif) no-repeat center center;}

1. 像素, 例如: background-position: 0px 0px;
   　　优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位。

　　缺点: 你必须知道确实的值.
　　原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.

/*圆心是左侧上部的那个点距离水平方向50px，垂直方向20px*/
.dingwei{background:url(bg.gif) no-repeat 50px 20px;}

no pic no bb

1. 百分比, 例如: background-position: 80% 50%;
   　　优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.

　　缺点: IE 中无法处理复杂的百分比定位. 你可以看看这个测试.
　　原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.

no pic no bb