文字主要解決如何理解背景定位（background-position）屬性的。
文章雖短，但是內容足夠撥亂反正。
首先，我們給一個 div 設定背景：
div{
width: 300px;
height: 200px;
padding: 10px;
border: 10px solid rgba(0,0,0,.7);
background-color: aqua;
background-image: url(test.jpg);
}
複製程式碼其效果如下圖所示，注意圖片平鋪是從 padding-box 開始的，另外， border 後面也是有圖片的。
為了方便理解 background-position，這讓背景圖片不平鋪。
background-repeat: no-repeat;
複製程式碼效果如圖所示：
接下來我們設定圖片位置：
background-position: right bottom;
複製程式碼產生如下效果：
重點來了，right bottom 這個值是什麼意思呢？
估計大部分人都理解錯了。
正確的理解是：圖片的右下角與 div 的右下角對齊！
你可能會說：這有啥？多麼直觀，沒錯，我就是這麼理解的。
這裡想說，如果真是這麼理解的話，那麼就不該對百分比值感到奇怪。
因為 right bottom 就是 100% 100%。
background-position: 100% 100%;
複製程式碼設定如上樣式，會產生同樣的效果。
100% 100% 的意思是說：
圖片自身的 100% 100% 位置 與 div 的 100% 100% 處對齊！
再與之前那句做下對比：
圖片的 right bottom 處與 div 的 right bottom 處對齊！
發現了沒有，百分值是很容易理解的。
並不需要像一些書裡那樣用公式來理解：
positionX = （容器的寬度 - 圖片的寬度） * percentX
當然，通過百分比對齊這種理解，很容易推出這個公式。
再以具體的 75% 40% 為例，生動地說明這種理解方式簡單易懂：
至此，核心內容說完了。
最後再提一下，預設背景定位是相對於 padding-box 的。通過 background-origin 來指定其他盒子。
另外，當 background-attach 設定為 fixed 時，圖片定位是相當於視口來的。示意如下：
本文完。
如果方便的話，關注我一下，點個贊再走。
謝謝。