實現這個小技巧也不是新鮮事。

使用CSS的背景屬性，實現對背景的定位，這樣就可以根據需要取出不到的影象位置實現只讀一次，多處使用。

實現起來不難，最根本的程式碼就是：background-position:X Y，用於定位背景圖片。

下面有個例子，以例說話：

這是我用於實現一個wiki視覺化編輯器時所用到的。wikiTool.gif（16*352，有22個圖示） 這張圖片有所有的工具按鈕圖示，tool1,tool2就分別是不同的按鈕。每個按鈕就是16*16畫素。

#tool1,#tool2{
    background:url(wikiTool.gif) no-repeat;
    border:1px solid;
    width:16px;
    height:16px;
    float:left;

}

#tool1{
    background-position:0px 0px;        //這裡是取出第一個按鈕的圖示
}

#tool2{ 
    background-position:0px -16px;     //這裡是取出第二個按鈕的圖示
}

<div id="tool1"></div>

<div id="tool2"></div>