通常來(lái)說(shuō)楞遏，完成設(shè)計(jì)稿后設(shè)計(jì)師會(huì)使用設(shè)計(jì)軟件中的切圖插件來(lái)進(jìn)行切圖茬暇。用ps設(shè)計(jì)有切圖神器cutterman，而設(shè)計(jì)新秀sketch也有許多不同的切圖插件寡喝，它們可以很方便地導(dǎo)出圖片糙俗，甚至能同時(shí)導(dǎo)出一倍圖和二倍圖，這可以滿足我們絕大多數(shù)的需求拘荡。
但是臼节，當(dāng)圖片很多時(shí)，這種方式不僅會(huì)傷害設(shè)計(jì)師的雙手珊皿，也會(huì)因?yàn)榇罅康馁Y源請(qǐng)求導(dǎo)致網(wǎng)頁(yè)打開(kāi)速度下降网缝。這時(shí)候，雪碧圖的優(yōu)勢(shì)就體現(xiàn)出來(lái)了蟋定，雪碧圖本質(zhì)上就是將眾多圖片拼貼為一張作為背景圖片引用粉臊。
在詳細(xì)介紹雪碧圖之前，先說(shuō)說(shuō)背景圖片的概念驶兜。前端在構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)時(shí)扼仲，會(huì)使用很多的塊元素堆疊嵌套，比如大標(biāo)題< h1 >抄淑、段落< p >屠凶、圖片< img >等，圖片標(biāo)簽< img >就是將圖片引用進(jìn)來(lái)直接顯示肆资，而背景圖片則是給< h1 >等元素的背景設(shè)置為圖片矗愧。就好比給電腦設(shè)置背景圖片，你可以控制它是自適應(yīng)還是原始大小郑原，重復(fù)或者不重復(fù)唉韭，同樣地在網(wǎng)頁(yè)中每個(gè)塊元素的背景圖片，可以控制它的適應(yīng)方式犯犁、是否重復(fù)以及顯示位置等属愤。
當(dāng)我們給一個(gè)元素設(shè)置固定大小，讓它的背景圖片位置進(jìn)行變化酸役，就好像顯示出了不同的圖片住诸，這就是雪碧圖的原理驾胆，有點(diǎn)類似ps里的創(chuàng)建剪切蒙版。下圖左邊就是網(wǎng)易云音樂(lè)的一張雪碧圖只壳，右側(cè)就是用剪切蒙版演示的雪碧圖原理俏拱。
一般來(lái)說(shuō)，在某一模塊（比如一個(gè)播放器）需要的圖片很多而每張圖片又不是很大時(shí)吼句，可以考慮切成雪碧圖交給前端锅必。但目前很多前端構(gòu)建工具里面有雪碧圖合并功能，所以如果前端使用了構(gòu)建工具可以把合并的功能交給前端惕艳。
雪碧圖還有一個(gè)妙用搞隐，那就是替代gif。設(shè)計(jì)師都知道远搪，透明背景的gif動(dòng)圖在導(dǎo)出時(shí)回帶有毛邊劣纲，在顏色反差很大的背景色上更明顯。因此谁鳍，可以考慮將多幀圖片橫向排列癞季，以雪碧圖的形式每隔固定時(shí)間改變背景圖片的位置，因?yàn)楸举|(zhì)上還是png圖片倘潜，所以毛邊的情況就可以解決了绷柒。可以參考我之前的文章：透明背景gif圖的鋸齒是個(gè)什么鬼涮因？ 废睦。
那么問(wèn)題來(lái)了，為什么叫“雪碧圖”呢养泡？叫“可樂(lè)圖”嗜湃、“芬達(dá)圖”、“王老吉圖”不行嗎澜掩？這個(gè)购披，我也不知道。
