您現在的位置: 365建站網 > 365學習 > CSS Sprites 簡單介紹以及優缺點

CSS Sprites 簡單介紹以及優缺點

文章來源:365jz.com     點擊數:201    更新時間:2017-08-07 19:05   參與評論

CSS Sprites簡介

通常被意譯為“CSS圖像拼合”或“CSS貼圖定位”。CSS Sprites并不是一門新技術,目前它已經在網頁開發中發展得較為成熟,阿里巴巴各子公司的網頁中到處都可發現css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情況下,它有著一定的優勢,最重要的是它可以減輕服務器的負載,提高網頁加載速度。隨著Web設計向著精致、巧妙的方向發展,設計師們開始考慮使用非JavaScript的方 式制作鼠標滑過、懸停菜單的效果,這時CSS Sprite應運而生。

說白了,CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。

當頁面加載時,不是加載每個單獨圖片,而是一次加載整個組合圖片。這是一個了不起的改進,它大大減少了HTTP請求的次數,減輕服務器壓力,同時縮短了懸停加載圖片所需要的時間延遲,使效果更流暢,不會停頓。

CSS Sprites應用

在這方面,淘寶網做的比較好,我就以淘寶網為例吧。

實例一:淘寶頻道頁面導航

效果圖:


點擊放大

sprites圖:

   
   

 

實例二:淘寶首頁

 

效果圖:


點擊放大

sprites圖:

CSS Sprites優點

CSS Sprites為什么突然跑火,跟能夠提升網站性能有關。顯而易見,這是它的巨大優點之一。

  1. 利用CSS Sprites能很好地減少了網頁的http請求,從而大大的提高了頁面的性能,這是CSS Sprites最大的優點,也是其被廣泛傳播和應用的主要原因;
  2. 個人認為CSS Sprites能減少圖片的字節,我曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。

CSS Sprites缺點

誠然CSS Sprites是如此的強大,但是也存在一些不可忽視的缺點。

  1. 在圖片合并的時候,你要把多張圖片有序的合理的合并成一張圖片,還要留好只夠的空間,防止板塊內不會出現不必要的背景,否則可能會出現出現干擾圖片的情況;這些還好,做痛苦的是在寬屏,高分辨率的屏幕下的自適應頁面,你的圖片如果不夠寬,很容易出現背景斷裂;
  2. CSS Sprites在開發的時候比較麻煩,你要通過photoshop或其他工具測量計算每一個背景單元的精確位置,這是針線活,沒什么難度,但是很繁瑣;不過網上已經有高手開發出“CSS Sprites 樣式生成工具”,大家可以嘗試一下。
  3. CSS Sprites在維護的時候比較麻煩,sprites是一般雙刃劍,如果頁面背景有少許改動,一般就要改這張合并的圖片,無需改的地方最好不要動,這樣避免改動更多的css,如果在原來的地方放不下,有只能(最好)往下加圖片,這樣圖片的字節就增加了,因為每次的圖片改動都得往這個圖片刪除或添加內容,顯得稍微繁瑣,而且重新算圖片的位置(尤其是這種上千px的圖)也是一件頗為不爽的事情。當然,在性能的口號下,這些都是可以克服的。
  4. 由于圖片的位置需要固定為某個絕對數值,這就失去了諸如center之類的靈活性。

CSS Sprites總結

性能壓倒一切。CSS Sprites非常值得學習和應用,特別是頁面有一堆ico(圖標)??傊芏鄷r候大家要權衡一下利弊,在決定是不是應用CSS Sprites。為保持兼容性和維護性,sprites圖片中的各個部分保持一定的距離是一種不錯的做法。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (201人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 东京热无码人妻一区二区av| 男人女人做性全过程视频欧洲| 夜鲁鲁鲁夜夜综合视频 | 男友把我弄湿问我想不想| 美女特黄特色免费观看| 五十老熟妇乱子伦免费观看| 免费可看黄的视频网站| 日本妇人成熟a片免费观看| 久久爱免费视频在线观看| 色婷婷五月综合欧美图片| 夜晚被公侵犯的人妻深田字幕| 中文字幕第一页| tubi8| 国产女厕所偷窥系列在线视频| 免费大黄美女片免费网站| 8090yy成年在线看片琪琪| 2020年最新国产精品正在播放| 日本高清色在线视频免费| 少妇高潮惨叫久久久久电影| chinese农村老年夫妇| 精品亚洲成a人在线观看| 久久国产乱子伦精品免费女| 玩丰满高大邻居人妻| 给岳m洗澡忍不住做了视频| 亚洲另类无码专区丝袜| 欧美av| 天天在线| 午夜成年奭片免费观看在线| 国产xxxx做受视频| free×性护士vidos中国| 幻女z0z0z0xx| http://www.arc-sfy.com