CSS CSS精靈技術(sprite)

2021-10-07 18:06:41 字數 1158 閱讀 7813

精靈圖案例

圖所示為網頁的請求原理圖,當使用者訪問乙個**時,需要向伺服器傳送請求,網頁上的每張影象都要經過一次請求才能展現給使用者。

然而,乙個網頁中往往會應用很多小的背景影象作為修飾,當網頁中的影象過多時,伺服器就會頻繁地接受和傳送請求,這將大大降低頁面的載入速度。為了有效地減少伺服器接受和傳送請求的次數,提高頁面的載入速度,出現了css精靈技術(也稱css sprites、css雪碧)。

簡單地說,css精靈是一種處理網頁背景影象的方式。它將乙個頁面涉及到的所有零星背景影象都集中到一張大圖中去,然後將大圖應用於網頁,這樣,當使用者訪問該頁面時,只需向服務傳送一次請求,網頁中的背景影象即可全部展示出來。通常情況下,這個由很多小的背景影象合成的大圖被稱為精靈圖(雪碧圖),如下圖所示為京東**中的乙個精靈圖。

css 精靈其實是將網頁中的一些背景影象整合到一張大圖中(精靈圖),然而,各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖,就需要使用css的background-image、background-repeat和background-position屬性進行背景定位,其中最關鍵的是使用background-position屬性精確地定位。

css 精靈其實是將網頁中的一些背景影象整合到一張大圖中(精靈圖),那我們要做的,就是把小圖拼合成一張大圖。

大部分情況下,精靈圖都是網頁美工做。

我們精靈圖上放的都是小的裝飾性質的背景。 插入不能往上放。

我們精靈圖的寬度取決於最寬的那個背景。

我們可以橫向擺放也可以縱向擺放,但是每個之間,間隔至少隔開偶數畫素合適。

在我們精靈圖的最低端,留一片空隙,方便我們以後新增其他精靈圖。

小公司,背景很少的情況,沒有必要使用精靈技術,維護成本太高。 如果是背景比較多,可以建議使用精靈技術。

lang

="en"

>

>

charset

="utf-8"

>

>

documenttitle

>

CSS精靈技術

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

CSS精靈技術

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

精靈技術詳解

css 精靈其實是將網頁中的一些背景影象整合到一張大圖中 精靈圖 各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖,就需要使用css的background image background repeat和background position屬性進行背景定位,其中最...