css背景圖優(yōu)化合并技巧-創(chuàng)新互聯(lián)

這篇文章主要講解了“css背景圖優(yōu)化合并技巧”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css背景圖優(yōu)化合并技巧”吧！

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)牡丹江免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

圖片本身的優(yōu)化

圖像質(zhì)量要求和圖像文件大小決定你用什么格式的圖片，用較小的圖片文件呈現(xiàn)較好的圖像質(zhì)量。
當(dāng)圖片色彩過于豐富且無透明要求時，建議采用jpg格式并保存為較高質(zhì)量。
當(dāng)圖片色彩過于豐富又有透明或半透明要求或陰影效果時，建議采用png24格式，并對IE6進(jìn)行png8退化（或在不得已情況下使用濾鏡）。
當(dāng)圖片色彩不太豐富時無論有無透明要求，請采用png8格式，大多數(shù)情況下建議采用這種格式。
當(dāng)圖片有動畫時，只能使用gif格式。
你可以使用工具對圖片進(jìn)行再次壓縮，但前提是不會影響色彩和透明。

多張圖片的合并：CSS Sprites技術(shù)

單個圖標(biāo)之間必須保留空隙，空隙大小由容器大小及顯示方式?jīng)Q定。這樣做的好處是既考慮了“容錯性”又提高了圖片的可維護(hù)性。
圖標(biāo)的排列方式，也由容器大小及顯示方式?jīng)Q定。排列方式分為以下幾種：橫向排列（容器寬度有限）、縱向排列（容器高度有限）、斜線排列（容器寬高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。
合并后圖片大小不宜超過50K，建議大小在20K-50K之間。
為保證多次修改后的圖片質(zhì)量，請保留一份PSD原始圖，修改和添加都在PSD中進(jìn)行，最后導(dǎo)出png。

分類合并：

并不是把所有的圖標(biāo)都合并在一張圖片里就是好的，除了要控制圖片大小之外還要注意以下方法。

按照圖片排列方式，把排列方式一樣的圖片進(jìn)行合并，便于樣式控制。
按照模塊或元件，把同屬于一個模塊或元件的圖片進(jìn)行合并，方便模塊或元件的維護(hù)。
按照圖片大小，把大小一致或差不多的圖片進(jìn)行合并，可充分利用圖片空間。
按照圖片色彩，把色彩一致或差不多的圖片進(jìn)行合并，保證合并后圖片的色彩不過于豐富，可防止色彩失真。
綜合以上方法進(jìn)行合并。

感謝各位的閱讀，以上就是“css背景圖優(yōu)化合并技巧”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css背景圖優(yōu)化合并技巧這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享標(biāo)題：css背景圖優(yōu)化合并技巧-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://bm7419.com/article42/dgoiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、微信小程序、面包屑導(dǎo)航

廣告

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