網頁上所有用得到的圖片都放在一張大圖裡面， 然後利用 CSS 去截出所需要的片段。其實這一整張「大」圖也不會很大，容量更是只有 12K 而已。
理論上，下載一張較大的圖， 比下載多張小圖要來得快速而有效率。
網頁上所有用得到的圖片都放在一張大圖裡面， 然後利用 CSS 去截出所需要的片段。其實這一整張「大」圖也不會很大，容量更是只有 12K 而已。
理論上，下載一張較大的圖， 比下載多張小圖要來得快速而有效率。
請參考以下的程式碼:
<style type="text/css">
.bigpicture
{
background: transparent url(http://"MyBigPictureUrl") repeat-x scroll 0 0;
border: 0;
padding: 0;
}
.smallpicture1
{
width: 18px;
height: 18px;
background-position: -108px -680px;
}
</style>
...
<img class="bigpicture smallpicture1" />
在這裡定義了 bigpicture (在這裡指定大圖的位置) 與 smallpicture1 兩種樣式， 然後藉由在個別 img 控制項中調整樣式組合， 再把所需要的那個圖形片段給截出來。 在這個範例中， 你可以先設定好 smallpicture1 的樣式， 再指定 class="bigpicture smallpicture1" 以截出這個小圖。 如果你要截出另一個圖， 那麼就再設定 smallpicture2 的樣式，再指定 class="bigpicture smallpicture2" 就行了。 不過要去找出那個 background-position 的值， 恐怕要額外花費一番小功夫， 這就是採用這種方法的小小代價。
引用來源：http://www.dotblogs.com.tw/johnny/archive/2010/01/25/13287.aspx
