CSS精靈技術

2021-08-16 01:53:37 字數 572 閱讀 3972

為了有效地減小伺服器接受和傳送請求的次數,提高頁面的載入速度,出現了css精靈技術(也稱css sprites ,css雪碧)

一種處理網頁背景影象的方式(主要是背景),將乙個頁面的涉及的所有零星背景影象都集中到一張大圖中去,將大圖應用於網頁,當使用者訪問該頁面時,只需要向伺服器傳送一次請求,,網頁中的背景影象就會全部顯示出來。

background 控制 ,size (大小) background-position (定位),background-repeat ,background-image,,主要是使用定位,將一張大圖拿過來,需要上面的哪個小圖的時候,就使用定位將零星的小圖的位置顯示在需要這個小圖的位置。如:

ps:如圖中,position的值為負,因為頁面中的座標系原點在左上角,y軸向下。

兩個盒子中是一樣的但是因為上面需要的小圖示不一樣,所以background-position中定位也是不一樣的。

多個盒子用同乙個精靈圖,可以用一行**搞定,如下:

CSS精靈技術

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

了解CSS精靈技術

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

CSS精靈技術(sprite)

當使用者訪問乙個 時,需要向伺服器傳送請求,網頁上的每張影象都要經過一次請求才能展現給使用者。然而,乙個網頁中往往會應用很多小的背景影象作為修飾,當網頁中的影象過多時,伺服器就會頻繁地接受和傳送請求,這將大大降低頁面的載入速度。為了有效地減少伺服器接受和傳送請求的次數,提高頁面的載入速度,出現了cs...