css 背景图片百分比

1.等价写法

在看各类教程时有以下等价写法：·

• top left, left top 等价于 0% 0%.
• top, top center, center top 等价于 50% 0%.
• right top, top right 等价于 100% 0%.
• left, left center, center left 等价于 0% 50%.
• center, center center 等价于 50% 50%.
• right, right center, center right 等价于 100% 50%.
• bottom left, left bottom 等价于 0% 100%.
• bottom, bottom center, center bottom 等价于 50% 100%.
• bottom right, right bottom 等价于 100% 100%.

这是怎么换算的呢？

2.百分比计算公式

任何CSS属性值为percent时，都需要根据某个参考值进行计算，搞明白这个参考值是什么，理解就容易多了。·

标准规定：background-position:perenct的参考值为: (容器宽度 - 背景图片宽度).

background-postion:x y;
x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

有了这个公式，就很容易理解百分百写法了，同理如果是负的百分比呢？

background-position:-50% -50%;

等同于x：- {容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：- {容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

3.推算百分比：

从上面看出来，百分比为:

background-position    x的值 = (背景图片左上角离包含块左上角距离)/(容器宽度 - 背景图片宽度)*100%。y的值同理可得。

平常使用 background-position，一般是用固定值，比如：

1 div {
2   background-position: 60px 10px; // 背景图片左上角离包含块左上角距离为水平方向 60px，竖直方向 10px
3 }

那如果上面的固定值，我坚持要写成百分比如何？

已知背景图片大小为 450×250，包含块div大小为 600×300。

计算得：

x = 60/(600-450)*100%=40%

y = 10/(300-250)*100%=20%

答案是：

1 div {
2     background-position:40% 20%;
3 }

附上2个参考链接，写的很详细却也很复杂....

http://caibaojian.com/background-position-percent.html

http://www.cnblogs.com/zxx-foreve1130/p/3964243.html