百分比的细节－－容器背景图片篇

 百分比的细节－－容器背景图片篇

 

background-position 的值可以是长度单位，百分比，或者关键字。

长度单位比较好理解。多少就多少，正的就正，负的就负的。而关键字的中left top就是0% center 就是50% right bottom就是100%，那百分比是怎样算的呢？

假如是 background-position:50% 0 的话，就是容器的左上角开始的坐标(50%,0) 和背景图的左上角开始的坐标(50%,0)的位置同点处，但这样的说法好像比较不好计算。
或者换个说法比较容易理解： 容器的宽减去背景图的宽，再乘 50% ，高的计算也一样。

比如 容器宽 1000px 背景图宽 800px：
如果background-positionX 是50%时，就是 ( 1000px - 800px ) * 50% = 100px；
如果background-positionX 是-50%时，就是 (1000px - 800px ) *-50% = -100px。

又比如 容器宽 600px 背景图宽 800px ：
如果background-positionX 是 50% 时，就是 ( 600px - 800px ) * 50% = -100px；
如果background-positionX 是 -50% 时，就是 (600px - 800px ) *-50% = 100px 。

最后一种就会出现就算是使用负的百分比也让容器的背景图左边为空或者出现背景色，百分比真是奇妙！

 

来源于:http://www.aoao.org.cn/blog/2007/04/percent-background/