background-position 50% 50%是如何計算的

background-position:value1 value2

value1和value2的值可以值絕對值也可以是百分數，大部分值都很好理解，但是50% 50%這兩個值是如何計算的呢？

圖片水平和垂直居中。與 background-position:center center;效果等同。

等同於x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
等同於y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

 例如： .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
        border:5px solid green;
    }

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如圖：

由於超出部分別往兩端延伸，所以我們可以先制作一張寬度足夠寬圖片設置水平值為50%，這樣可以用來適應不同的瀏覽器，使得圖片水平充滿瀏覽器窗口並且居中。替代margin:50 auto的功能。