[心得] 有效減少 HTTP Request的CSS Sprites

看板Web_Design作者Fishmeal ( )時間14年前 (2009/12/06 21:05)推噓5(5推 0噓 21→)

留言26則, 6人參與討論串1/2 (看更多)

原文連結：http://superlevin.pixnet.net/blog/post/29936462 　　CSS Sprites並不是什麼新技術，Dave Shea(CSS Zen Garden創辦人)在２００４年於A List Apart(ALA)就曾經提出CSS Sprites: Image Slicing’ s Kiss of Death這篇文章了。　　簡單的說，CSS Sprites就是把網頁上的圖片全部放在同一張圖片上，而網頁載入時就祇要載入這張已經結合起來的圖片。再利用CSS的background-image 與background-position來調整圖片，讓要顯示的部位顯示出來。　　對瀏覽器而言，如果網頁中含有背景圖30張，就會有30個http request，如果合成一張後，就祇要1個http request，如果利用http cache的話，更可以讓圖片cache在瀏覽器中。　　像facebook（臉書）就利用這張圖片來處理icon；YUI(Yahoo User Interface) 也利用這張圖片來做css sprites；而這篇文章也提出台灣著名的網站funP，也是利用這樣子的技術。　　這裡示範一個非常簡單的範例：素材：http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png

原始碼： Body前加上 <style > .min, .max { width:40px; //定義按鈕的寬度 height:20px; //定義按鈕的高度 background-image: url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png); //圖檔 background-repeat: no-repeat; // 不重覆背景圖片 text-indent:-999em; //隱藏文字 } .max { background-position: 0 -750px; } .min { background-position: 0 -800px; } </style> body後加上 <div>上一筆</div> <div>下一筆</div> 小技巧：使用css sprites最麻煩就是要計算位置，可以利用小畫家開啟後，利用選擇工具指向該圖示的起始位置。右下角就會出現位置的座標。 -- 我不是高手, 高手是正在銀幕前微笑的人 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 118.233.206.45

推

kewang

12/06 21:57, , 1^F

12/06 21:57, 1^F

→

kewang

12/06 21:57, , 2^F

12/06 21:57, 2^F

→

TonyQ

12/06 23:05, , 3^F

12/06 23:05, 3^F