CSS精靈技術及其優化經驗分享

2021-08-08 06:49:47 字數 566 閱讀 8910

由於網速的限制,頁面開發者都喜歡把網頁裡面的位元組數控制的非常小,往往在乙個資料夾裡散落著n多的小碎圖。隨著網路技術的發展,網速的提公升,大家越來越重視頁面的載入速度,頁面效率問題,過去的那些小圖便成為了前端開發者的眼中釘,因為每載入一張都會產生一次瀏覽器請求數,發起的請求數越多那麼頁面載入的速度也越慢。還有當頁面載入時,乙個個的零星顯示,滑鼠經過時候背景閃白等也都是我們不能忍受的。於是乎將頁面中的背景圖整合到一起,利用「background-image」,「background- repeat」,「background-position」的組合進行背景定位的技術被廣泛使用與了頁面構建中,這就是css sprites。當然css sprites技術也存在著維護不便,記憶體占用大等等的缺點。

精靈圖(css sprites)就是通過將多個小融合到一張圖裡面,一般是將整張先放到乙個div盒子裡面,然後通過background背景定位技巧來顯示需要的,盒子的大小決定要顯示的的面積。

background:url(「…」) no-repeat 50px 50px;

url是精靈圖的位址,no-repeat是的顯示方式(不重複),兩個資料是定位的資料,分別表示左、上的距離

CSS精靈技術

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

CSS精靈技術

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

了解CSS精靈技術

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