前面361模板網已經對CSS的background-position屬性做了介紹：《CSS樣式代碼：background-position 用法詳細介紹》，今天這一講，主要是對前面課程的補充介紹，大神飄過。

背景圖片定位background-position用法詳解：

background-position的寫法：

1)關鍵字：background-position: left top;

2)像素：background-position: 0px 0px;

3)百分比：background-position: 0% 0%;

均表示將圖片定位在左上角。第一個元素值指的是距離左邊的距離，第二個元素值指的是距離上邊的距離。但百分比與其他兩種是有所區別的。

直接舉例：

1.background:url(../image/header.jpg) no-repeat 30% 30%;

背景圖片的(30%， 30%)的點與其所屬的div的(30%， 30%)的點對齊。圖片中的該定位點與元素中的定位點重合，即該元素其實設置了兩個效果。

2.background:url(../image/header.jpg) no-repeat left top; /*相當于0% 0%*/

表示背景圖片在指定div的位置，從左上角開始

3.background:url(../image/header.jpg) no-repeat right bottom; /*相當于100% 100%*/

表示背景圖片從指定div的右下角開始顯示圖片，并且背景圖片右下角與div的右下角重合

4.background:url(../image/header.jpg) no-repeat 300px 200px;

即背景圖片距div的左邊界300px，距div的上邊界200px。

5.background:url(../image/header.jpg) no-repeat 50% 50% ;

/* 相當于background:url(../image/header.jpg) no-repeat center ; */

背景圖片在div中水平方向與豎直方向都居中顯示

6.background:url(../image/header.jpg) no-repeat 300px; /*相當于300px 50%*/

若只寫一個參數，則另一個參數默認為50%，即背景圖片距div的左邊300px，而豎直方向居中。

7.background:url(../image/header.jpg) no-repeat -300px -100px ;

背景圖片相對于div左上角(0px，0px) 又向左移動了300px，向上移動了100px