css background-position屬性的用法

請教下background-position: left -29px; 這是啥意思呢？ ？一看我感覺是往左移-29個像素，但我測試了下又不是。請教高手

是用來定位圖片的位置的。
最主要使用在 一張png 上有多個logo 或 ico  這個時候就用到background-position了
background-position：x  y   x等於平行軸   y等於垂直軸。
x y的取值可以是正數，也可以是負數

div可以理解成一個矩形框，它的左上角是頂點，背景圖片的頂點也是左上角，div載入背景圖時，會把兩個頂點重合，頂點的座標是(0,0)。不理解的看圖，很簡單的。 。 。

       +1的小圖片混雜在大圖中，想提取出來，需要用background-position屬性，這個屬性相當於大圖片不動，把div的頂點進行移動，移動到目標小圖的頂點位置，如下圖：

 這樣一來，div中顯示的就是小圖了，但是，顯示的還不僅僅是小圖，而是圖中陰影部分，怎麼辦呢？設定一下div的寬、高，讓它跟小圖的寬、高一樣就可以嗆了！ ！

       再來看看background-position屬性，它有兩個參數，分別是水平方向移動的像素、垂直方向移動的像素，都用負數表示。大圖不動，div移動，也只能是向右、向下移動，只要記住這兩個方向移動的像素都用負數表示就行了！

       因此，只要找到小圖相對於大圖左上角頂點的水平移動像素、垂直移動像素就可以了。小菜也不用什麼專業工具，用截圖就很方便，從大圖左上角頂點開始截，到小圖頂點那停下來，一看像素就差不多了，然後再調試調試，基本上就搞定。

       在本例中，A小圖的位移是：-25px -374px，A小圖尺寸是：24px 16px。因此，css樣式如下：

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
}

效果如下：

#   這樣就算是把小圖摳出來啦！簡單吧！ ！

        先解釋個問題，圖片上有+1，而我又在超鏈上寫了一個+1，這是因為很多時候文字內容不是寫在圖片上的，那樣彈性太差，文本就是文本，小菜為了給大家一個完整的演示，因此又寫了一個+1，接下來就處理它！

        先把+1置中，且居中分為水平居中和垂直居中，水平居中超連結，需要在div上設定#text-align:center;，這個屬性是對子節點而言的；垂直居中div中的超鏈接，只需要把a標籤的line-height屬性設成和div的高度一樣即可。樣式如下：

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
    text-align:center;
}
.btn a{
    line-height:16px;
}

效果如下：

這種技術有好處也有壞處，好處是因為圖片都放在一起，請求時只需請求一張圖片，減少了與伺服器的互動次數，還可以解決hover延遲載入的問題。壞處就是不好控制，擴展性不太好，以後有改動，可謂是牽一發而動全身，而且有時會因為螢幕解析度不同出現背景斷裂現象。

以上是css background-position屬性的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！