新聞中心

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


咨詢
建站咨詢
