上篇文章講到了雪碧圖，其中小機器人抖腿的動作設置了圖片的background-position：-640px 循環到-1200px，那么這個數值是如何得出來的？下面具體分析一下如何計算background-position的數值。
分析素材
下面這張雪碧圖是今天的分析素材，尺寸為273*71，單位是px：
概念
background-position：設置背景圖像的起始位置。
實驗分析
html代碼：設置一個box用於顯示圖片。
<div class="box"></div>
css屬性設置：
.box{
margin-top: 50px;
margin-left: 50px;
width: 500px; /*box的寬度 遠大於雪碧圖寬度*/
height: 71px; /*box的高度 和雪碧圖高度一致*/
background-image: url(../img/jingling.png); /*將雪碧圖置為背景*/
background-repeat: no-repeat; /*設置背景不重復*/
background-color: #aaa;
background-position: 0px 0px; /*設置背景圖起始位置為0px 0px */
}
此時界面顯示如下：這說明，當 background-position坐標設置為0 0，雪碧圖起始位置是和box起始位置重合的。
接着設置屬性，圖片顯示如下：
background-position: -91px 0px;
我們發現，box起始位置變成了雪碧圖的第二張開始。此時再回過頭來看看background-position概念：設置背景圖像起始位置。把box想象成一個向下向右為正的坐標系，並且box位置保持不動。那么 -91px是該雪碧圖在X軸起始位置，可以看到雪碧圖的第一幀已經超出box的正坐標系了，所以它看不見了。始終記住一個概念，background-position設置的是雪碧圖相對於盒子的起始位置。
由此分析一下上一篇的雪碧圖位置設置：
- 機器人雪碧圖總共1280*80px，也就是一幀是80*80px。
- 小機器人的抖腿動作在easy-in進場動畫結束之后，此時雪碧圖停在最后一幀圖上面，也就是有15幀圖在坐標系左邊，是看不見的。
- 注意此時要開始機器人抖腿動畫，也就是從雪碧圖的第9張到第16張執行幀動畫。
- 要把第九幀圖顯示在坐標系 （0,0）位置，那么雪碧圖X軸的起始位置就應該是 -640px，要把第16幀顯示在（0,0）位置，那么雪碧圖的起始位置就應該是-1200px（保留最后一幀在x軸右邊，否則就看不見了）。
坐標值如圖所示：
結論
始終記住一個概念，background-position設置的是雪碧圖相對於盒子的起始位置。
至此，你明白background-position為什么設置為負值了么？
