CSS 技巧篇(三)：background-position和雪碧圖(CSS Sprites)用法

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

1、background-position屬性

一、background-position屬性的定義

background-position 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 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。

2、雪碧圖

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來闡述它的使用方法。

<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: -50px 0;}
    .icon3{background-position: 0 -50px;}
    .icon4{background-position: -50px -50px;}
</style>
複製代碼

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
</div>
複製代碼

二、爲何使用雪碧圖時background-position屬性值爲負數

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