這篇文章主要介紹了CSS背景圖如何優(yōu)化合并，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專(zhuān)注于沭陽(yáng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供沭陽(yáng)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，沭陽(yáng)網(wǎng)站制作、沭陽(yáng)網(wǎng)頁(yè)設(shè)計(jì)、沭陽(yáng)網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù)，打造沭陽(yáng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供沭陽(yáng)網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

圖片本身的優(yōu)化：
圖像質(zhì)量要求和圖像文件大小決定你用什么格式的圖片，用較小的圖片文件呈現(xiàn)較好的圖像質(zhì)量。
當(dāng)圖片色彩過(guò)于豐富且無(wú)透明要求時(shí)，建議采用jpg格式并保存為較高質(zhì)量。
當(dāng)圖片色彩過(guò)于豐富又有透明或半透明要求或陰影效果時(shí)，建議采用png24格式，并對(duì)IE6進(jìn)行png8退化（或在不得已情況下使用濾鏡）。
當(dāng)圖片色彩不太豐富時(shí)無(wú)論有無(wú)透明要求，請(qǐng)采用png8格式，大多數(shù)情況下建議采用這種格式。
當(dāng)圖片有動(dòng)畫(huà)時(shí)，只能使用gif格式。
你可以使用工具對(duì)圖片進(jìn)行再次壓縮，但前提是不會(huì)影響色彩和透明。
多張圖片的合并：CSS Sprites技術(shù)
單個(gè)圖標(biāo)之間必須保留空隙，空隙大小由容器大小及顯示方式?jīng)Q定。這樣做的好處是既考慮了“容錯(cuò)性”又提高了圖片的可維護(hù)性。
圖標(biāo)的排列方式，也由容器大小及顯示方式?jīng)Q定。排列方式分為以下幾種：橫向排列（容器寬度有限）、縱向排列（容器高度有限）、斜線排列（容器寬高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。
合并后圖片大小不宜超過(guò)50K，建議大小在20K-50K之間。
為保證多次修改后的圖片質(zhì)量，請(qǐng)保留一份PSD原始圖，修改和添加都在PSD中進(jìn)行，最后導(dǎo)出png。
分類(lèi)合并：
并不是把所有的圖標(biāo)都合并在一張圖片里就是最好的，除了要控制圖片大小之外還要注意以下方法。
按照?qǐng)D片排列方式，把排列方式一樣的圖片進(jìn)行合并，便于樣式控制。
按照模塊或元件，把同屬于一個(gè)模塊或元件的圖片進(jìn)行合并，方便模塊或元件的維護(hù)。
按照?qǐng)D片大小，把大小一致或差不多的圖片進(jìn)行合并，可充分利用圖片空間。
按照?qǐng)D片色彩，把色彩一致或差不多的圖片進(jìn)行合并，保證合并后圖片的色彩不過(guò)于豐富，可防止色彩失真。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS背景圖如何優(yōu)化合并”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!