background-position屬性的百分比用法

以前使用background-position時常常用具體像素值做爲參數，好比
background-position：20px 30px。
這種用法的效果很簡單，就是背景圖的左上角定點距離容器左邊20px，距離上邊30px，也就是背景圖向右邊移動20px，向下邊移動30px。
可是，若是用%時就不能這樣想了，或者說，不徹底是這樣。先來舉幾個。

background-position：0% 0%；

background-position：100% 100%；

background-position：50% 50%；

如何照本來的思想，background-position：50% 50%；不該該是背景圖的左上角定點距離包裹元素左上角向右向下偏移50%距離嗎？這樣想就錯了，其實是，包裹元素的尺寸減掉背景圖片的尺寸做爲基數進行偏移，而不是以包裹元素的寬高做爲基數偏移。

background-position：50% 50%解釋：假設包裹層寬度300px，背景圖寬度200px，則第一個50%實際上對應偏移像素值爲（300px - 200px）*50%。顯然，這樣就是居中顯示了。

同理，background-position：100% 100%，去掉背景圖原始尺寸後，剩下的空餘部分所有偏移了，固然是跑到右下角了。

總結：就一句話，不是以包裹層寬高做爲基數進行偏移，而是剩餘寬高做爲基數進行偏移的！