csssprites用法

css sprites的利弊

關于這項技術，大的好處有下面幾個：

1，減少網頁加載時的http請求數。這種情況貌似只適用于“初次加載”之類需要重新從服務器端獲取資源的情況。但無論怎樣，對于一個流量較大或者頻繁被“重新加載”的網頁，還是很有用的。

2，給鏈接做背景圖時，可以防止a:hover 時再載入背景圖片而導致的背景“閃爍”。個人覺得這一點在提升用戶體驗具有一定的意義。

3，圖片易于管理。前提是拼合的圖片有一定的規(guī)律。如下圖，就是一張“網站全部使用的按鈕背景”的圖片。這樣可以很直觀的看到網站中所有的按鈕樣 式。(我個人喜歡按照圖片的一定“屬性”來拼圖片，一張圖片都是icon或者都是btn背景…這樣就可以順便管理圖片，且有一定規(guī) 律可循的圖片，比較容易排列在一起。當然，有些時候，也會選擇按照“模塊”來拼合一張圖片，這樣在模塊化的結構中，就產生了一個簡單的邏輯：調用一個模 塊，則調用上面的背景圖。否則，這張圖片就不被調用?？梢杂行У姆乐怪挥昧艘粋€小小的圖標，就調用了整個大圖片的問題。)

css sprites 適用范圍：

1，需要通過降低http請求數完成網頁加速。

2，網頁中含有大量小圖標?；蛘?，某些圖標通用性很強。

3，網頁中有需要預載的圖片。主要是a與a:hover背景圖這種關系的。如果a與a:hover的背景圖分別加載，那么，就會出現用戶鼠標移到某 個按鈕上，按鈕的背景突然消失再出來，產生“閃爍”，如果按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產生按鈕“消失”了的錯覺。

需要滿足的條件

在網頁中，通過這項技術拼合在一起的圖片最好有一項規(guī)律。定寬或者定高。最好是寬高都能定下來。需要平鋪的圖片，顯然不適合sprite。

如上圖的buttons，就屬于定寬定高的情況。

定寬情況下，則可平行排列若干小圖片。定高，則縱向排列小圖片。

若背景既不定寬，也不定高情況下強行使用css sprites技術，則容易產生“不應該出現的圖片出現在頁面上”的狀態(tài)。若是“強行定高”，也將非常不利于日后的維護。

總結

這項技術好與不好并不能一概而論的。要視網站的具體情況而定。分析時首先決定自己“是否需要”，還要綜合開發(fā)成本，維護成本等問題。找到一個適合實 際情況的方案再做定奪。及時要用sprites，建議也不要極端的將各種尺寸，各種對齊方式，各種用途圖片放在一起去維護。這樣的極端或許不能再減少幾個 http請求數，反而為日后的維護埋下隱患。不適當的的運用反則會導致后期維護的麻煩。

分享名稱：csssprites用法
路徑分享：http://www.muchs.cn/news24/315424.html

成都網站建設公司_創(chuàng)新互聯，為您提供自適應網站、品牌網站設計、做網站、建站公司、ChatGPT、網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯