background-position屬性使用頻率非常高，大量的網站為了減少http請求數，會將大量的圖片圖片合成一張雪碧圖（Sprite）來使用。雪碧圖的使用就是通過控制background-position屬性值來確定圖片呈現的位置，不得不說它的作用非常重要，當然除了在使用雪碧圖的場景外，別的某些場景也常常會使用到這個屬性，這次就總結下它的用法。

       還是那句話，工欲善其事必先利其器，只有真正的瞭解background-position的特性才能在需要的場景更好的運用它。

background-position的定義

background-position 屬性設定背景影象的起始位置。

這個屬性設定背景原影象（由 background-image 定義）的位置，背景影象如果要重複，將從這一點開始。

提示：
       background-position屬性設定背景原影象（由 background-image 定義）的位置，意味著使用這個屬性的前提是必須設定背景原影象background-image。

background-position的屬性值

        background-position有兩個屬性值， background-position：x | y，用法上可以對其一個屬性單獨使用 background-position-x 和 background-position-y。

background-position屬性值有三種情況

提示：
       background-position兩個屬性值可以混用，例如：方向值和數值、數值和百分比，並非x軸和y軸需要設定為同一型別的屬性值，這點也正是說明了background-position屬性可以衍生單獨設定background-position-x 或 background-position-y。

background-position屬性值之神奇的百分比

       我們都知道background-position 屬性的作用：設定背景影象的起始位置。這裡的起始位置是相對於自身容器而言，如果屬性值為數值，大家可能很好理解，例如：background-position：100px 50px 這個屬性值意味著圖片在距離自身容器x軸為100px、y軸為50px的位置作為圖片顯示的起點位置。

然而使用百分比來設定屬性值，是以自身容器的長寬 減去 圖片的長寬 乘以 百分比 所得的數值來確定圖片的起始位置。

公式：
    （容器自身的寬度/高度 - 圖片自身的寬度/高度） x 百分比 

例如：background-position：50% 50%

提示：

1. background-position屬性值如果是數值，那麼指相對於容器自身數值的距離作為起始位置；如果是百分比或者是方向，那麼指的是相對於容器自身（容器自身的寬度/高度 - 圖片自身的寬度/高度） x 百分比 所得的數值作為起始位置。
2. 如果不設定background-position屬性值，那麼預設起始位置為background-position：0% 0%。
3. 方向值和百分比的計算方式是一樣的，它們可以相互轉換，left：0%，right：100%，center：50%。
4. 如果background-position屬性值只設置一個，那麼另一個預設為center。

雪碧圖

       CSS雪碧圖即CSS Sprites，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用CSS的背景定位來顯示需要顯示的圖片部分。

上面這張圖片是由多個小圖片合成的，前端成它為CSS雪碧圖。

background-position屬性在雪碧圖中的用法

       瞭解了background-position屬性的用法，那麼對於如何使用雪碧圖的學習就相對簡單了很多。使用雪碧圖之前，我們需要知道雪碧圖中各個圖示的位置。

       從上面的圖片不難看出雪碧圖中各個小圖示（icon）在整張雪碧圖的起始位置，例如第一個圖示（裙子）在雪碧圖的起始位置為 x：0，y：0，第二個圖示（鞋子）在雪碧圖的起始位置為 x：0，y：50px，第三個圖示（足球）在雪碧圖的起始位置為x：0，y：100px，依次類推可以得出各個圖片相對於雪碧圖的起始位置。

       以上面的雪碧圖為例（實際雪碧圖中各個小圖片的起始位置和上面的展示圖不同）用一個Demo來闡述它的使用方法。

HTML

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
</div>

CSS

    <style>
        .box{width: 600px; height:300px; border: 3px solid #ccc; background-color: #8064A2; }
        span{display: inline-block; width: 25px; height: 25px; border: 3px solid #ccc;
        background-image: url(css/img/sidebar.png); background-repeat: no-repeat;
        margin: 5px;}
        .icon1{background-position: 0 0;}
        .icon2{background-position: -40px 0;}
        .icon3{background-position: 0 -25px;}
        .icon4{background-position: -40px -25px;}
    </style>

為什麼使用雪碧圖時background-position屬性值為負數

       上面的例子已經闡述瞭如何使用雪碧圖，只不過初學者可能會對雪碧圖中的background-position屬性值為負值有所疑惑。這個問題其實不難回答，如果細心的人應該很早就發現了使用負數的根源所在。這邊用上面的Demo為例，來分析這個問題。上面的span標籤是一個25px長寬的容器，在使用背景圖時，背景圖的初始位置會從容器的左上角的開始鋪滿整個容器，然而容器的大小限制了背景圖呈現的大小，超出容器部分被隱藏起來。假如設定background-position: 0 0 那麼意味著，背景圖相對於容器（span標籤）x軸=0；y軸=0的位置作為背景圖的起始位置來顯示圖片。所以如果需要在容器中顯示第二個圖示，意味著雪碧圖x軸方向要左移動，左移動雪碧圖即它的值會設定為負數，同理y軸方向也一樣。