基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, …. 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, … 9, 0 做成一張橫的長條圖, 例如:
(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)
而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.
這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:
- background-image
- background-position
- width
- height
也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:
這個 2 數字, 是利用這個 HTML:
<div style=”width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -34px 0px;”> </div>
來達成的, 實際上用圖示來說明就像是這樣:
也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.
若是要秀出 307 則使用如下語法:
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;”> </div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;”> </div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -119px 0px;”> </div>
如下:
上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.
接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:
要取出其中的 4個部分, 可以利用以下語法, 例如:
同步中心:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;”> </div>
Windows CardSpace:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;”> </div>
Java:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;”> </div>
iSCSI啟動器:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;”> </div>
這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!
[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2
[2016/3/30 6:26]
另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp