background-position屬性使用頻率非常高奠支，大量的網(wǎng)站為了減少http請求數(shù)，會將大量的圖片圖片合成一張雪碧圖（Sprite）來使用渠欺。雪碧圖的使用就是通過控制background-position屬性值來確定圖片呈現(xiàn)的位置针史，不得不說它的作用非常重要，當(dāng)然除了在使用雪碧圖的場景外而芥，別的某些場景也常常會使用到這個屬性，這次就總結(jié)下它的用法膀值。
還是那句話棍丐，工欲善其事必先利其器，只有真正的了解background-position的特性才能在需要的場景更好的運用它沧踏。
background-position的定義
background-position 屬性設(shè)置背景圖像的起始位置歌逢。
這個屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復(fù)悦冀，將從這一點開始趋翻。
提示：
background-position屬性設(shè)置背景原圖像（由 background-image 定義）的位置，意味著使用這個屬性的前提是必須設(shè)置背景原圖像background-image盒蟆。
background-position的屬性值
background-position有兩個屬性值， background-position：x | y师骗，用法上可以對其一個屬性單獨使用 background-position-x 和 background-position-y历等。
background-position屬性值有三種情況
提示：
background-position兩個屬性值可以混用，例如：方向值和數(shù)值辟癌、數(shù)值和百分比寒屯，并非x軸和y軸需要設(shè)置為同一類型的屬性值，這點也正是說明了background-position屬性可以衍生單獨設(shè)置background-position-x 或 background-position-y黍少。
background-position屬性值之神奇的百分比
我們都知道background-position 屬性的作用：設(shè)置背景圖像的起始位置寡夹。這里的起始位置是相對于自身容器而言，如果屬性值為數(shù)值厂置，大家可能很好理解菩掏，例如：background-position：100px 50px 這個屬性值意味著圖片在距離自身容器x軸為100px、y軸為50px的位置作為圖片顯示的起點位置昵济。
然而使用百分比來設(shè)置屬性值智绸，是以自身容器的長寬 減去 圖片的長寬 乘以 百分比 所得的數(shù)值來確定圖片的起始位置。
公式：
（容器自身的寬度/高度 - 圖片自身的寬度/高度） x 百分比
1
2
例如：background-position：50% 50%
提示：
background-position屬性值如果是數(shù)值访忿，那么指相對于容器自身數(shù)值的距離作為起始位置瞧栗；如果是百分比或者是方向，那么指的是相對于容器自身（容器自身的寬度/高度 - 圖片自身的寬度/高度） x 百分比 所得的數(shù)值作為起始位置海铆。
如果不設(shè)置background-position屬性值迹恐，那么默認(rèn)起始位置為background-position：0% 0%。
方向值和百分比的計算方式是一樣的卧斟，它們可以相互轉(zhuǎn)換殴边，left：0%憎茂，right：100%，center：50%找都。
如果background-position屬性值只設(shè)置一個唇辨，那么另一個默認(rèn)為center。
雪碧圖
CSS雪碧圖即CSS Sprites能耻，也有人叫它CSS精靈赏枚，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上晓猛，然后利用CSS的背景定位來顯示需要顯示的圖片部分饿幅。
上面這張圖片是由多個小圖片合成的，前端成它為CSS雪碧圖戒职。
background-position屬性在雪碧圖中的用法
了解了background-position屬性的用法栗恩，那么對于如何使用雪碧圖的學(xué)習(xí)就相對簡單了很多。使用雪碧圖之前洪燥，我們需要知道雪碧圖中各個圖標(biāo)的位置磕秤。
從上面的圖片不難看出雪碧圖中各個小圖標(biāo)（icon）在整張雪碧圖的起始位置，例如第一個圖標(biāo)（裙子）在雪碧圖的起始位置為 x：0捧韵，y：0市咆，第二個圖標(biāo)（鞋子）在雪碧圖的起始位置為 x：0，y：50px再来，第三個圖標(biāo)（足球）在雪碧圖的起始位置為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>
1
2
3
4
5
6
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>
1
2
3
4
5
6
7
8
9
10
為什么使用雪碧圖時background-position屬性值為負(fù)數(shù)
上面的例子已經(jīng)闡述了如何使用雪碧圖，只不過初學(xué)者可能會對雪碧圖中的background-position屬性值為負(fù)值有所疑惑针炉。這個問題其實不難回答挠他，如果細(xì)心的人應(yīng)該很早就發(fā)現(xiàn)了使用負(fù)數(shù)的根源所在。這邊用上面的Demo為例糊识，來分析這個問題绩社。上面的span標(biāo)簽是一個25px長寬的容器，在使用背景圖時赂苗，背景圖的初始位置會從容器的左上角的開始鋪滿整個容器愉耙，然而容器的大小限制了背景圖呈現(xiàn)的大小，超出容器部分被隱藏起來拌滋。假如設(shè)置background-position: 0 0 那么意味著朴沿，背景圖相對于容器（span標(biāo)簽）x軸=0；y軸=0的位置作為背景圖的起始位置來顯示圖片。所以如果需要在容器中顯示第二個圖標(biāo)赌渣，意味著雪碧圖x軸方向要左移動魏铅，左移動雪碧圖即它的值會設(shè)置為負(fù)數(shù)，同理y軸方向也一樣坚芜。
————————————————
版權(quán)聲明：本文為CSDN博主「大狗派克」的原創(chuàng)文章览芳，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明鸿竖。
原文鏈接：https://blog.csdn.net/bingkingboy/article/details/51059209
