CSS背景图像位置属性background-position百分比详解

   百分比值同关键字很接近，但其操作方式不一样。用百分比值来居中一幅背景图像，也很简单：

   body { background-image;url(beijing.gif); background-repeat:no-repeat; background-position:50%
50%; }

   这使得背景图像的中心同其父元素中心对齐。换句话说，百分比值同时应用于元素及其背景图像。

   为理解这一概念，让我们桌仔细观察其过程。当在某一元素里居中背景图像时，图像中被描述为50% 50%的点将与元素中同样描述的点对齐。

   因此，要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明：

   body { background-image:url(beijing.gif); backgrounf-repeat:no-repeat; background-position:33%
66%; }

   这就使得图像上相对于左上角水平为三分一，垂直为三分之二的那个点与元素中的同样的点重合。

   注意，百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置，那么背景图像将被放于水平三分之二，垂直三分之一处。同样，当只给出一个百分比值时，这个值为水平值，而另一个垂直百分比值被假定为50%。这同关键字一样，当只有一个关键字给出时，另一个被假定为center。如下：

   body { background-image:url(beijing.gif); backgrounf-repeat:no-repeat; background-position:33%;
}

   则背景图像会放置于水平三分之一，垂直二分之一处。

   下面给出了关键字和百分比值的对照比：

   单一关键字：center、top、bottom、right、left。

   等价的双关键字：center center、top center、center to、bottom center、center bottom、center right、right center、center left、left center、top left、left top、top right、bottom right、right bottom、bottom left、left bottom。

   等价的百分比：50% 50%、50% 0%、50% 100%、100% 50%、100% 50%、0% 50%、0%、0% 0%、0% 100%、100% 100%、0% 100%。

   background-position的缺省值为0% O%，和top left的功能一样。

 

   这也是为什么在设置百分比值时，图像总是相对于元素的左上角开始平铺的原因所在。

   文章出处：http://www.gootry.com/java-middle/article/100620233848/149