【CSS】關於background-position

background-position 的取值 有幾種狀況（在此以前請先去閱讀關於background-origin的信息）

關鍵字： center top right bottom left（能夠用百分比轉換)

長度值： 這個長度值解釋爲 從內邊距區左上角的偏移。便宜點是背景圖像的左上角。

background-position: 20px 30px;

說明背景圖像的左上角這個點 位於 距離元素內邊距左上角點(起始位置)右邊20像素，向下30像素的位置。（這裏的前提是background-origin值是默認的padding-box,起始位置爲padding-box的左上角。這個起始位置若是background-origin不一樣則會不一樣，請點擊background-origin）

百分比: 其實the key of the article is the percentage.這個百分比並非咱們想象的背景圖像的左上角的點，離元素的起始位置點的偏移。

按照《css權威指南的解釋》就是百分數值同時應用於元素和背景圖像。好比代碼長這樣：

p { background-image: url(xxx.gif); background-repeat: no-repeat; background-position: 33% 66%; }

這個xxx.gif的位置是在哪裏？ 能夠這樣說： 相對於背景圖像來講，向右33%（背景圖像的寬度）， 向下66%（背景圖像的高度）的這個點，與元素的內邊距去左上角（默認background-origin爲padding-box的起始位置）向右33%（元素的寬度）， 向下66% （元素的高度）的這個點 是重合的！

---

仍是mdn上的英文好理解的一點：

With a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper left corner of the box’s padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of padding area. With a value pair of ‘14% 84%’, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

tip： background-position會影響background-repeat的初始位置。

參考資料： MDN->background-position,《css權威指南》