精靈圖專題

關於精靈圖

1、什麼是精靈圖

    就是將頁面上一些較小的圖片放在一張大圖上。

2、爲什麼要有精靈圖

      最早的時候網速十分有限,爲了提升用戶的體驗我們會將一張大圖分解成爲多張小圖來提高頁面的打開速度。但是網速得到提升,爲了能夠讓服務器承載更多的請求,我們要減少瀏覽器對服務器的請求,最直接的方式,就是將多張小的圖片放在一張大圖上。從而減輕服務器的壓力。而將多張小圖放在一張大圖上的操作就叫做精靈圖,也可以叫做雪碧圖,雪碧技術。(css sprite)

3、精靈圖的使用

1)如果我們需要的一張圖片在精靈圖,必須要了解這個圖片的大小,以及在精靈圖上的位置。

2)在頁面上將這個圖片顯示出來,在顯示的時候一定要注意我們容器的大小一定要和這個圖標的大小一樣:

3)將精靈圖設置爲容器的背景圖片,並且根據圖片所在的位置將背景圖片進行平移:

4、製作精靈圖:

      精靈圖必須是一些小的圖片,精靈圖的多個小圖之間一定要留有足夠的間隙,完成精靈圖以後一定要在精靈圖的下方留足夠的空隙,方便將來再次添加其它的精靈圖。如果是頁面上一個像素的背景圖片不要放在精靈圖上面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章