關於CSS設置頁面背景圖的一些疑問

 關於背景圖片的位置其background-position設置背景圖片的位置有兩種方式，一種是是根據像素設置，第二種根據百分比設置，第一種根據像素的位置是很簡單的，只是關於百分比這個設置理解特別容易出現誤差的，先看看一段簡單的代碼:

.bg-position{
  background:url(../../public/images/404.jpg) no-repeat;
  margin-top:100px;
  margin-left:100px;
  background-color:#ccc;
  height: 500px;
  width: 800px;
  background-position: 100px 100px;
}

這種狀況是能夠預見的，以下所示:

網上看了一篇文章說是background-position是依賴於no-repeat的，在repeat的狀態下和默認的狀態下（默認即爲repeat）,background-position是不起做用的，所以本身嘗試了一把，看了一下效果:

代碼中去掉了no-repeat，一樣是能夠展現，之前repeat的時候沒有注意和background-position結合一塊兒，不過如今發現設置background-position以後，咱們不斷的調整垂直方向的距離，發現全部的位置變更都是根據正中間的所有顯示的圖片的位置進行調整，有興趣的能夠嘗試一下~

咱們將background-position設置爲20% 20%，代碼以下:

.bg-position {
    background: url(../../public/images/404.jpg) no-repeat;
    margin-top: 100px;
    margin-left: 100px;
    background-color: #ccc;
    height: 500px;
    width: 500px;
    background-position: 20% 20%;
}

最開始我覺得是最開始的圖片位置同樣，500*0.2=100,可是事實上卻不是這樣:

這個百分比不是根據div的寬度來絕對的，而是根據div寬/高和圖片的寬/高的差值來決定的:

position-x=（容器寬度-圖片寬度）*百分比

position-y=（容器高度-圖片高度）*百分比

這樣就會理解上圖出現的問題，若是想更好的理解一下能夠理解圖片的20%的點和容器在20%所在的點重合~