精靈技術詳解

2021-10-21 14:51:38 字數 680 閱讀 7391

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

減少對瀏覽器的請求次數,避免網頁的延遲

方便小圖示的統一管理

精靈圖例項:

引入精靈圖

html**:

class

="d1"

>

div>

class

="d2"

>

div>

class

="d3"

>

div>

css**:

.div

精確定位需要顯示的小圖示座標

.d1

.d2.d3

CSS精靈技術

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

CSS精靈技術

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

了解CSS精靈技術

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