新聞中心

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、鶴壁網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、鶴壁網(wǎng)絡(luò)營(yíng)銷、鶴壁企業(yè)策劃、鶴壁品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供鶴壁建站搭建服務(wù),24小時(shí)服務(wù)熱線:13518219792,官方網(wǎng)址:www.cdcxhl.com
簡(jiǎn)單來講,精靈技術(shù)就是一種處理網(wǎng)頁背景圖像的方式,它需要將一個(gè)頁面中涉及到的所有或一部分較小的背景圖像合并到一張較大的圖片中,然后再將這個(gè)圖片應(yīng)用到網(wǎng)頁種。通常情況下,我們只是將背景圖像中那些較小的、零碎的圖像集中到一個(gè)大的圖像中,這個(gè)較大的圖像被稱為精靈圖(也被稱為雪碧圖),如下圖所示就是淘寶網(wǎng)上應(yīng)用的一個(gè)精靈圖:
圖:淘寶網(wǎng)中的精靈圖
精靈圖的使用也非常簡(jiǎn)單,只需要借助 background 或者 background-position 屬性來定位背景圖像的位置即可。下面以上圖所示的精靈圖為例,來演示一下精靈圖的使用:
運(yùn)行結(jié)果如下:
圖:精靈圖演示
簡(jiǎn)單來說,精靈圖就是一個(gè)大的背景圖,您只需要使用 background-position 來移動(dòng)背景圖,從而只顯示背景圖的一部分。目前為止,精靈圖發(fā)展的已經(jīng)非常成熟,阿里巴巴、百度、谷歌、京東、淘寶等大型網(wǎng)站中都可以看到精靈圖的影子,使用精靈圖可以減少圖片的體積,也可以顯著的減少對(duì)服務(wù)器的請(qǐng)求次數(shù),提高網(wǎng)頁的加載速度。當(dāng)然,使用精靈圖也不是沒有弊端,比如:
- 在圖片合并的時(shí)候,需要把多張圖片有序的、合理的合并成一張圖片,每個(gè)小圖之間需要預(yù)留足夠的空間;
- 在寬屏或者高分辨率的屏幕下來自適應(yīng)頁面寬度時(shí),如果圖片不夠?qū)?,?huì)出現(xiàn)背景斷裂;
- 精靈圖在維護(hù)的時(shí)候比較麻煩,如果頁面背景有少許改動(dòng),就需要修改整個(gè)精靈圖。
文章題目:CSS精靈圖(Sprite)
網(wǎng)站鏈接:http://fisionsoft.com.cn/article/dppedoc.html


咨詢
建站咨詢
