CSS-background-position百分比

關於背景圖片的位置其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%所在的點重合~