精靈圖的使用-（坐标辨別）

1. 精靈圖主要針對小的背景圖檔來使用。
2. 主要借助于背景圖檔的來實作-​

   ​background-position​

   ​。
3. 一般情況下精靈圖都是負值（原因請往下看咯）



4. 注意》》》》： 這裡的藍色箭頭指向的才是電腦頁面的方向，與傳統的數學上的有差别，但是原理是一樣的。



5. 這是一張精靈圖，你大概想出這個圖檔的x軸和y軸就行，

   那麼思考這張精靈圖裡飛機的位置大概是多少？（利用ps）



6. 由圖可以看出,被選中的小灰機圖示的左上角的位置是x=125px，y=55px

   到這裡别急嗷，咋們如何将這個圖檔導進來呢，如何使用這類似的精靈圖——（一般規定一個盒子，然後再給盒子添加背景圖檔）

h5{
    float: left;
    margin-right: 8px;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -125px -55px;
    /* background-color: purple; */
}      

核心代碼： ​

​background: url(../images/icons.png) no-repeat -125px -55px;​

​

那坐标為啥子什麼負值呢？？？

規定了盒子的大小，是做好le選框

那麼這個盒子的位置是不變的，盒子背景顯示的内容也是初始的一角，盒子不能動呀，那麼就要背景圖檔來動了，那這個灰機的x軸，y軸不就是距離這個原點的位置嘛，那往x軸，y軸箭頭相反的位置移動不就是負值嘛。