CSS精靈技術(sprite)
圖所示爲網頁的請求原理圖,當用戶訪問一個網站時,需要向服務器發送請求,網頁上的每張圖像都要經過一次請求才能展現給用戶。
然而,一個網頁中往往會應用很多小的背景圖像作爲修飾,當網頁中的圖像過多時,服務器就會頻繁地接受和發送請求,這將大大降低頁面的加載速度。
爲了有效地減少服務器接受和發送請求的次數,提高頁面的加載速度,出現了CSS精靈技術(也稱CSS Sprites、CSS雪碧)。
精靈技術本質
簡單地說,CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去,然後將大圖應用於網頁,這樣,當用戶訪問該頁面時,只需向服務發送一次請求,網頁中的背景圖像即可全部展示出來。通常情況下,這個由很多小的背景圖像合成的大圖被稱爲精靈圖(雪碧圖)。
精靈技術使用
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中(精靈圖),然而,各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖,就需要使用CSS的background-image
、background-repeat
和background-position
屬性進行背景定位,其中最關鍵的是使用background-position
屬性精確地定位。
精靈圖:
頁面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
border: 1px solid black;/*加上邊框可以方便看到此容器大小*/
background: url(images/btns.png) -276px 0 no-repeat;
height: 70px;
width:260px;
}
.box2{
border: 1px solid black;
background: url(images/btns.png) 0 0 no-repeat;
height: 70px;
width:260px;
}
.box3{
border: 1px solid black;
background: url(images/btns.png) -551px 0 no-repeat;
height: 70px;
width:260px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
精靈圖的製作
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中(精靈圖),那我們要做的,就是把小圖拼合成一張大圖。
大部分情況下,精靈圖都是網頁美工做。
一般情況,小公司,背景圖片很少的情況,沒有必要使用精靈技術,維護成本太高。 如果是背景圖片比較多,可以建議使用精靈技術。