pCloud Partner Program

好用的CSS STYLE截圖

程式技術 2009/06/16 23:27
views: 83147 times
基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 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個屬性即可達成:
  1. background-image
  2. background-position
  3. width
  4. height
也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

 

這個 2 數字, 是利用這個 HTML:

<div style="width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: -34px 0px;">&nbsp;</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(http://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;">&nbsp;</div>
<div style="float: left; width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;">&nbsp;</div>
<div style="float: left; width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: -119px 0px;">&nbsp;</div>

如下:

 
 
 


上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.

接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:
用戶插入圖片

要取出其中的 4個部分, 可以利用以下語法, 例如:

同步中心:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;">&nbsp;</div>
 
Windows CardSpace:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;">&nbsp;</div>
 

Java:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;">&nbsp;</div>
 

iSCSI啟動器:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;">&nbsp;</div>
 
這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!

[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2
top
TAG , ,

Trackback Address :: http://diary.tw/tim/trackback/781

  1. March 2009/06/17 10:18 MODIFY/DELETE REPLY

    很簡單的語法。
    但是不知道的人可能抓破頭都弄不出來。
    呵呵。

    • Timothy 2009/06/17 11:52 MODIFY/DELETE

      真的還蠻有意思的功能, 可以研究看看, 很方便

  2. David 2009/06/17 10:36 MODIFY/DELETE REPLY

    CSS Sprites有褒有貶,利用的好是很方便,但是也有可能會遇到很囧的情況啊...

    目前看到最多利用的地方還是在navigator選單以及評分用的星星

    • Timothy 2009/06/17 11:53 MODIFY/DELETE

      當然囉, 用對地方真的很方便, 像是選單, 評分星等, 都是很適合的, 謝謝你的指教.

  3. will 2009/07/08 11:47 MODIFY/DELETE REPLY

    真是好方法阿....想都沒想過有這種方式....讚

    • Timothy 2009/07/08 21:34 MODIFY/DELETE

      的確, 這個是一個很有用的方法, 尤其是對於大量小圖的網站而言, 可以利用這種方式來節省不少 http traffic.

  4. autoloan 2009/07/11 00:03 MODIFY/DELETE REPLY

    這招不錯@@抓一次就能節省很多流量

  5. Timothy 2016/03/30 12:26 MODIFY/DELETE REPLY

    另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp

Write a comment


PREV : [1] : ... [314] : [315] : [316] : [317] : [318] : [319] : [320] : [321] : [322] : ... [517] : NEXT



AGI 亞奇雷 240GB 2.5吋 SATA3 SSD 固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)
UNITEK TYPE-C 轉VGA/HDMI/PD充電/HUB 鋁合金多功能轉接器
亞果元素 CASA Hub VH1 Type-C 轉 VGA - HDMI二合一顯示轉接器


 Waiting...