IT技ji)躉?dong)交流平(ping)台

好运11选5官网

作(zuo)者︰whl  發布(bu)日期(qi)︰2020-02-27 16:13:00

  在國內CSS Sprite因為它的特(te)別之處被很多人稱為精靈,它能很好的對網頁(ye)圖片進行(xing)處理。CSS Sprite可(ke)以把你在當(dang)前頁(ye)面中(zhong)需要的所(suo)有(you)圖片都整(zheng)合到一張大圖中(zhong),或者將你需要的圖標和背景合並到一起,讓你使用(yong)起來更(geng)加方便。下文將主(zhu)要對CSS Sprite雪碧圖的使用(yong)進行(xing)詳(xiang)細介紹,感xing)巳?幕按蠹銥ke)以一起來看看。

  雪碧圖的使用(yong)場(chang)景

  靜態圖片,不(bu)隨用(yong)戶信(xin)息的變(bian)化而變(bian)化。

  小圖片,容量比較小(2~3k)。

  圖片加載量比較大。

  目(mu)的

  減少Http請求(qiu)數量,加速(su)內容顯示。因為每請求(qiu)一次,就會和服(fu)務器建立一次鏈接,而建立鏈接是需要額外的時間(jian)的。

  使用(yong)

  使用(yong)雪碧圖之前,我們(men)需要知道雪碧圖中(zhong)各個圖標的位置(zhi)。

各個圖標位置(zhi)

  從上(shang)面的圖片不(bu)難看出雪碧圖中(zhong)各個小圖標(icon)在整(zheng)張雪碧圖的起始位置(zhi),例如第一個圖標(裙子)在雪碧圖的起始位置(zhi)為 x︰0,y︰0,第二個圖標(鞋子)在雪碧圖的起始位置(zhi)為 x︰0,y︰50px,第三個圖標(足(zu)球)在雪碧圖的起始位置(zhi)為x︰0,y︰100px,依次類(lei)推可(ke)以得出各個圖片相對于(yu)雪碧圖的起始位置(zhi)。

  以上(shang)面的雪碧圖為例(實(shi)際(ji)雪碧圖中(zhong)各個小圖片的起始位置(zhi)和上(shang)面的展示圖不(bu)同)用(yong)一個Demo來闡述它的使用(yong)方法。

HTML內容
CSS內容

  為什麼使用(yong)雪碧圖ji)ackground-position屬性值均為負(fu)數。

  上(shang)面的例子已經闡述了如何使用(yong)雪碧圖,只不(bu)過初(chu)學者可(ke)能會對雪碧圖中(zhong)的background-position屬性值為負(fu)值有(you)所(suo)疑惑。這個問題其實(shi)不(bu)難回(hui)答(da),如果細心(xin)的人應該很早就發現了使用(yong)負(fu)數的根源所(suo)在。這邊用(yong)上(shang)面的Demo為例,來分(fen)析這個問題。上(shang)面的span標簽是一個24*30px長寬的容器,在使用(yong)背景圖ji)保 塵巴嫉某chu)始位置(zhi)會從容器的左(zuo)上(shang)角(jiao)的mu)kai)始鋪(pu)滿整(zheng)個容器,然而容器的大小限制了背景圖呈現的大小,超出容器部分(fen)被隱藏(cang)起來。假(jia)如設(she)置(zhi)background-position: 0 0 那麼意味著(zhou),背景圖相對于(yu)容器(span標簽)x軸=0;y軸=0的位置(zhi)作(zuo)為背景圖的起始位置(zhi)來顯示圖片。所(suo)以如果需要在容器中(zhong)顯示第二個圖標,意味著(zhou)雪碧圖x軸方向要左(zuo)移(yi)動(dong),左(zuo)移(yi)動(dong)雪碧圖即它的值會設(she)置(zhi)為負(fu)數,同理y軸方向也一樣。

y軸方向也一樣

  制作(zuo)

  PS手(shou)動(dong)拼圖

  使用(yong)Sprite工具自(zi)動(dong)生(sheng)成(CssGaga或者CssSprite.exe)

  CssSprite 雪碧圖工具,已yan)ithub上(shang)開(kai)源,地址︰https://github.com/iwangx/sprite

  雪碧圖的優缺點

  優點︰

  1.加快網頁(ye)加載速(su)度

  網頁(ye)上(shang)面每一張圖片,都要向瀏(liu)覽器請求(qiu)下載圖片,而瀏(liu)覽器接受的同時請求(qiu)數是10個,一次能處理的請求(qiu)數目(mu)是兩個。

  2.後期(qi)維護簡單(dan)

  該工具可(ke)以直接通過選擇圖片進行(xing)圖片的拼接,當(dang)然你也可(ke)以自(zi)己挪(nuo)動(dong)里面的圖片,自(zi)己去(qu)布(bu)局你的雪碧圖,更(geng)換(huan)圖片的時候也只要更(geng)改一下圖片的位置(zhi)就可(ke)以了。直接生(sheng)成代碼,簡單(dan)易用(yong)。

  3、CSS Sprites能減少圖片的字(zi)節,曾經比較過多次3張圖片合並成1張圖片的字(zi)節總是小于(yu)這3張圖片的字(zi)節總和。

  4、解決(jue)了網頁(ye)設(she)計師在圖片命(ming)名上(shang)的困擾,只需對一張集合的圖片上(shang)命(ming)名就可(ke)以了,不(bu)需要對每一個小元素進行(xing)命(ming)名,從而提(ti)高(gao)了網頁(ye)的制作(zuo)效率。

  5、更(geng)換(huan)風(feng)格方便,只需要在一張或少張圖片上(shang)修改圖片的顏色或樣式,整(zheng)個網頁(ye)的風(feng)格就可(ke)以改變(bian)。維護起來更(geng)加方便。

  缺點︰

  在圖片合並的時候,你要把多張圖片有(you)序的合理的合並成一張圖片,還要留好足(zu)夠的mu)佔jian),防(fang)止板塊內出現不(bu)必(bi)要的背景;這些還gou)茫 鍆純嗟氖竊誑砥粒 gao)分(fen)辨率shi)鈉聊幌碌淖zi)適(shi)應頁(ye)面,你的圖片如果不(bu)夠寬,很容易出現背景斷裂;

  至于(yu)可(ke)維護性,這是一般雙刃(ren)劍。可(ke)能有(you)人喜bu)叮 you)人不(bu)喜bu)叮 蛭 看蔚耐計 畝dong)都得往這個圖片刪(shan)jing)蛺砑幽諶藎 緣蒙shao)微繁瑣。而且算圖片的位置(zhi)(尤其是這種(zhong)上(shang)千px的圖)也是一件頗為不(bu)爽的事情。當(dang)然,在性能的mu)諍畔攏 廡┐際(ji)強(qiang)ke)以克服(fu)的。

  由于(yu)圖片的位置(zhi)需要固定為某個絕對數值,這就失去(qu)了諸如center之類(lei)的靈活性。

  CSS Sprites一般只能使用(yong)到固定大小的盒子(box)里,這樣才能夠遮擋住不(bu)應該看到的部分(fen)。這就是說,在一些需要非單(dan)向的平(ping)鋪(pu)背景和需要網頁(ye)縮放的情況下,CSS Sprites並不(bu)合適(shi)。

  闡述

  經過上(shang)面的圖文講bu)猓 嘈xin)大家對于(yu)雪碧圖已經有(you)了初(chu)步(bu)的了解吧?之前an)糠fen)初(chu)學者和小編反映的雪碧圖中(zhong)的background-position屬性值顯示的是負(fu)值dang)奈侍饃shang)文也bu)xing)了回(hui)答(da)。雪碧圖的優缺點也bu)虻dan)明了,大家可(ke)以根據自(zi)己的需求(qiu)來使用(yong)。

Tag標簽︰CSS  Sprite雪碧圖  
  • 好运11选5官网

About IT165 - 廣告服(fu)務 - 隱私聲明 - 版(ban)權申明 - 免責條(tiao)款 - 網站地圖 - 網友投稿 - 福建福彩网官网聯(lian)系方式
本站內容來自(zi)于(yu)互聯(lian)網,僅供用(yong)于(yu)網絡技ji)躚 xi),學習(xi)中(zhong)請遵循相關法律法規(gui)
好运11选5官网 | 下一页