CSS Sprites（截取部分圖片）是怎么工作的

CSS Sprites的最初的想法是可以通過<img>標簽和JAVASCRIPT中的onmouseover和onmouseout的事件使用CSS來切換一張大圖片中的坐標位置顯示到DIV上來實現圖片的變化。

主要的功能是通過背景圖片的定位來顯示圖片的局部，當很多小圖片放在一張圖片上然后加載，就可以減少圖片加載時服務器的開銷

如亞馬遜網站的各類圖標：

只需一張圖片即可完成加載所有的按鈕和圖標。

下面就來介紹一下CSS Sprites的工作原理

我們以上圖來作為背景圖片

初始坐標x=0,y=0的圖片顯示如下圖

當變換了坐標值，則圖片就沿左邊向上或左方移動，如坐標為x=0,y=-48時，圖片位置變為如下圖

 

例子：

      在需要用到圖片的時候，現階段是通過CSS屬性background-image組合background-repeat, background-position等來實現。通過調整background-position的數值，背景圖片就能以不同的面貌出現在你眼前。

我們使用下圖sprite.png來作為例子：

新建兩個DIV

<div class="max">最大化</div>
<div class="min">最小化</div>

配置CSS樣式：

.min, .max {
  width:16px;
  height:16px;
  background-image:url(sprite.png);
  background-repeat: no-repeat; /*我們並不想讓它平鋪*/
  text-indent:-999em; /*隱藏文本的一種方法*/
}

當還沒有指定background-position時，默認為 0 0，可以看下圖片，處於的位置正是灰塊。接下來我們要找到代表最大化的加號和代表最小化的減號的位置找出來。經過測量，最大化按鈕位於Y軸的350px處，最小化按鈕位於Y軸400px處。需要向上移動圖片，得到代碼如下：

.max { background-position: 0 -350px;}
.min { background-position: 0 -400px;}

這樣就完成了圖片的定位顯示，如果需要配置動態變更圖片，只需在JS方法中變更background-position就可以了。