導(dǎo)讀:織夢(mèng)技術(shù)織夢(mèng)技術(shù)CSSSprites技術(shù)對(duì)于廣大的前端工程師來說應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開發(fā)者昵稱為CSS精靈CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個(gè)技dede后臺(tái)模板織夢(mèng)模板安裝。

CSS Sprites 技術(shù)對(duì)于廣大的前端工程師來說應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個(gè)技術(shù)呢？下面讓我們?cè)敿?xì)的聊聊。

在大家還在撥號(hào)上網(wǎng)的“遠(yuǎn)古時(shí)期”，由于網(wǎng)速的限制，頁面開發(fā)者都喜歡把網(wǎng)頁里面的圖片字節(jié)數(shù)控制的非常小，往往在一個(gè)圖片文件夾里散落著n多的小 碎圖。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)速的提升，大家越來越重視頁面的加載速度，頁面效率問題，過去的那些小圖便成為了前端開發(fā)者的眼中釘，因?yàn)槊考虞d一張圖片都 會(huì)產(chǎn)生一次瀏覽器請(qǐng)求數(shù)，發(fā)起的請(qǐng)求數(shù)越多那么頁面加載的速度也越慢。還有當(dāng)頁面加載時(shí)，圖片一個(gè)個(gè)的零星顯示，鼠標(biāo)經(jīng)過時(shí)候背景閃白等也都是我們不能忍 受的。于是乎將頁面中的背景圖整合到一起，利用“background- image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位的技術(shù)被廣泛使用與了頁面構(gòu)建 中，這就是CSS Sprites。當(dāng)然CSS Sprites技術(shù)也存在著維護(hù)不便，內(nèi)存占用大等等的缺點(diǎn)。

好了，如果我只說這些，那么這篇文章就有點(diǎn)太水了。前面那些只是對(duì)CSS Sprites技術(shù)的一個(gè)普及。作為一個(gè)開發(fā)者我們應(yīng)該對(duì)它有一個(gè)更全面的認(rèn)識(shí)，挖掘深度內(nèi)容，這樣才能有利于我們效率開發(fā)，團(tuán)隊(duì)協(xié)作。

頭疼的多人拼圖游戲

使用CSS Sprites，就好像玩拼圖游戲一樣。一張白畫布，那么多圖怎么放到里面去才會(huì)完美？這是個(gè)讓人糾結(jié)的事。而且在實(shí)際在工作場(chǎng)景中， 我們面臨著項(xiàng)目開發(fā)時(shí)間緊張，UI設(shè)計(jì)圖要分期提供，多人協(xié)同開發(fā)一個(gè)項(xiàng)目等等問題。這些問題非常容易讓我們?cè)诖箜?xiàng)目中迷失，造成CSS拼圖混亂，維護(hù)及 其困難的情況。

定好規(guī)則，其實(shí)拼圖也挺好玩的

先期的準(zhǔn)備工作

應(yīng)對(duì)一個(gè)項(xiàng)目后期維護(hù)成本大的問題，我們最好的解決方案就是在開始前制定一系列的規(guī)范來限制問題的產(chǎn)品。好的開始是成功的一半。對(duì)于 CSS Sprites，在項(xiàng)目開始前，我們要充分認(rèn)識(shí)一個(gè)產(chǎn)品，同UI設(shè)計(jì)師做好良好的溝通，對(duì)我們未來組成我們Sprites圖的各個(gè)元素有個(gè)大體的 概念，比如我們的背景拼圖可能包括什么。

關(guān)鍵詞標(biāo)簽: 標(biāo)簽 織夢(mèng) 標(biāo)題