background-position和雪碧圖(CSS Sprites)使用方法

       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軸方向也同樣。