最開始的時(shí)候，圖片都是一張一張單獨(dú)存在，需要哪張，就發(fā)送http請求來調(diào)用，隨著時(shí)間的推移，background-position的應(yīng)用，又興起了css-sprite這種技術(shù)，一時(shí)之間大家都在盲目跟風(fēng)，認(rèn)為不這樣做就不夠?qū)I(yè)，或者技術(shù)不夠好等。

css-sprite是把所有用于網(wǎng)頁背景的圖片，拼合在一張大圖之內(nèi)，然后通過背景圖定位的方法，來控制顯示自己需要的那張圖。但是不是所有的圖片都適用css-sprite，例如網(wǎng)頁內(nèi)的圖片，或者是需要重復(fù)平鋪的圖片。并且，這種大圖一旦合并以后，如果以后再要修改其中的某一個(gè)圖片，就要牽一發(fā)而動(dòng)全身，如果只是簡單顏色改變，或許還稍微容易一些，但是如果大圖內(nèi)的某些元素的尺寸變化了，就需要重新進(jìn)行合并了，并且可能會導(dǎo)致其他圖片的位置發(fā)生變化，從而演變成調(diào)整一個(gè)圖片，還要同時(shí)調(diào)整大圖內(nèi)的其余圖片，并且要調(diào)整css的background-position的數(shù)值。

并不是說css-sprite技術(shù)不好，只是什么時(shí)候需要用，什么時(shí)候不需要用，不能夠一概而論的跟風(fēng)，看人家網(wǎng)易用了，你也用！

css-sprite適用的條件： 1.網(wǎng)站的開發(fā)已經(jīng)完畢，包括功能，模塊，交互，程序，都已經(jīng)反復(fù)測試，就差發(fā)布; 2.網(wǎng)站已經(jīng)趨于完美，不會再三天兩頭的改動(dòng)，不能說今天上線了，明天覺得按鈕太小了，要調(diào)整，后天覺得按鈕太大了要調(diào)整; 3.你的網(wǎng)站流量很大，需要盡量減少http的請求次數(shù);

css-sprite也并不是像看起來那么簡單的，只是單一的把圖片拼合在大圖上那么簡單，首先你應(yīng)該考慮，那些圖片是需要每個(gè)頁面都要引入的，這些圖片可以拼合到一張大圖中，而那些只有個(gè)別頁面才需要調(diào)用的圖片，則不適合也加在大圖里面，否則你的http請求次數(shù)的確是小了，但是某些圖片其實(shí)在某些頁面是不需要用到的，但是你放在一張大圖里面，用戶還是需要去加載，造成了網(wǎng)速的負(fù)擔(dān)。

另外，對于一些小公司，做一個(gè)產(chǎn)品沒有一個(gè)合理的構(gòu)思甚至框架，想到哪里就讓人去做，想一步做一步，做一步改一步，改完一步，再改一步，改來改去沒有最終敲定的，這個(gè)時(shí)候如果一開始就使用css-sprite拼合圖片，無疑給自己造成了巨大的困擾，增加了許多的工作量。所以最好是，等到產(chǎn)品已經(jīng)完全敲定，測試沒有問題，可以上線發(fā)布了，再去 去拼合圖片。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

文章標(biāo)題：css-sprite的解析
文章網(wǎng)址：http://aaarwkj.com/news5/315055.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化、ChatGPT、服務(wù)器托管、做網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

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