你可能理解錯了background-position

文本主要解決如何理解背景定位（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 時，圖片定位是至關於視口來的。示意以下：

本文完。

若是方便的話，關注我一下，點個贊再走。

謝謝。