background-position:perenct的参考值

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

举例

1、background-position:center center等价于background-position:50% 50%等价于background-position:?px ?px·

例子中用到背景图如下【尺寸：200px*200px】：

背景图在容器中居中。

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
    background-position: center center;
}
</style>
<div class="wrap">
</div>

效果都是让背景图片居中·

如上通过设置百分比和关键字能实现背景图居中，如果要实现通过具体值来设置图片居中该设置多少？

根据上面公式：

x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;

y=(容器的高度-背景图高度)*y百分比=（300px-200px）*50%=50px;

即设置background-postion:50px 50px;

测试一下：

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
/*    background-position: center center;*/
    background-position: 50px 50px;
}
</style>
<div class="wrap">
</div>

效果同样居中

原文链接：http://caibaojian.com/background-position-percent.html