css精靈技術的好處

2021-10-22 21:40:29 字數 1267 閱讀 9599

過去,網頁開發者喜歡把網頁裡面的位元組數控制得非常小,往往在乙個資料夾裡散落著許多 小,客戶端沒顯示一張都會向伺服器傳送一次請求,越多請求次數越多,這樣就會造成載入延遲,影響使用者體驗。隨著時代的快捷,使用者會越來越重視上網速度,然後把這些小的整合到了一起,精靈技術出現了。

css精靈圖也叫做css雪碧圖,是一種應用於網頁上的技術。 它可以將網頁上涉及到的零星包含一張大的去載入使用。

如圖為專案中精靈:

大大減少了的質量.

大大減少伺服器的請求次數,網頁載入速度變快.

原來需在伺服器訪問多次獲取,現只獲取一張即可.

首先我們知道,css精靈技術主要針對於背景,插入img是不需要這個技術的。

首先測量所需在整張精靈圖上的為值,測量為x軸方向,y軸方向。

使用background將精靈引入,並且確定好位置。

因為以左上角x,y的0點,所以x,y軸的距離均使用負值。

運用精靈技術是通過css的 background-image 、background-repeat 、 background-position 屬性組合進行背景定位,將一張大的的某一部分顯示到網頁的固定位置。

(1)第一步將精靈圖設定在容器中,並新增樣式:

"dome1">

< a href=" " >

< a href="#" class="a2">

< a href="#" class="a3">

(2)第二步,給a標籤設定背景,以及位置定位

(3)效果顯示:

其實精靈技術就是將精靈圖設為乙個大背景,然後通過背景定位來移動背景圖,從而顯示需要顯示在頁面的內容。

當頁面中需要載入的過多時,建議使用精靈技術,減少伺服器請求,如果涉及的不多時,不建議使用。

精靈技術不足之處:

精靈技術,比較麻煩的點在於要計算各個圖示的大小,位置多少才能顯示圖示,如果座標偏移了一些的話,那麼可能顯示不全圖示或者圖示顯示得偏左偏上等問題,需要計算好偏移多少才能更好的展示圖示。

CSS精靈技術

為了有效地減小伺服器接受和傳送請求的次數,提高頁面的載入速度,出現了css精靈技術 也稱css sprites css雪碧 一種處理網頁背景影象的方式 主要是背景 將乙個頁面的涉及的所有零星背景影象都集中到一張大圖中去,將大圖應用於網頁,當使用者訪問該頁面時,只需要向伺服器傳送一次請求,網頁中的背景...

CSS精靈技術

css精靈其實是將網頁中的一些小背景影象整合到一張大圖中 精靈圖 然而,各個網頁元素通常只需要精靈頁面中不同位置的小圖。需要用到的css 為了有效減少伺服器接收和傳送請求的次數,提高頁面的載入速度。乙個網頁中往往需要多個小作為修飾,當網頁中的影象過多的時候,伺服器就會頻繁的棘手和傳送請求,將大大降低...

了解CSS精靈技術

css 精靈其實是將網頁中的一些背景影象整合到一張大圖中 精靈圖 然後通過定位到不同位置而得到我們需要的某個小圖.使用css精靈,需要使用css的 圖所示為網頁的請求原理圖,當使用者訪問乙個 時,需要向伺服器傳送請求,網頁上的每張影象都要經過一次請求才能展現給使用者。然而,乙個網頁中往往會應用很多小...