pCloud Partner Program

好用的CSS STYLE截圖

程式技術 2009/06/16 23:27
views: 75297 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] : ... [269] : [270] : [271] : [272] : [273] : [274] : [275] : [276] : [277] : ... [472] : NEXT



Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...