一、名詞解釋
在網頁中，我們可以看到有很多的小圖標，比如微博上的登錄位置有很多這樣的小圖標。因為瀏覽器顯示網頁的所有內容都需要從我們自己的服務器進行下載，如果將這些圖標分別存在服務器上，那么當需要顯示的時候將會發出很多次請求-->響應-->下載，這樣一來將會消耗大量的時間來下載這些小圖標
所以為了提高網頁響應速度，避免這個小圖標加載耗費大量時間，於是將這些小圖片全部放到一張圖片上，例如下面的圖是利用瀏覽器調試工具(通常為F12打開)從微博的請求中找到的，大家可以直接下載使用
二、使用難點
精靈圖片的使用難點在於如何在這一張圖片中定位到我們需要的部分，首先我們需要理解三個坐標：瀏覽器坐標、組件坐標、圖片坐標，每個組件都有自己的坐標點，左上角為原點，往上y值為負數，越來越小；往左x為負數，越來越小
假如我們的組件的寬高分別為16px，圖片寬高為200px，我們發現如果將圖片作為組件的背景圖片，將會從圖片0,0左邊點開始顯示，只能顯示圖片的16px，因為組件只有這么大，多余的圖片就被舍棄了。如下圖片當圖片原點和組件原點重疊的時候，組件只能顯示圖片的16px大小
假如此時我們想要截取圖片中第二列中的亮的vip6，此時圖片需要分別往左移動和往上移動一定距離如下。原來圖片的坐標和組件的坐標重疊都是0,0，此時圖片往上移動，相當於y減小了100px（假設值），此時y坐標為-100px；往左移動24px，此時x坐標為-24px，所以如果我們需要獲取vip6圖標，圖片相對於組件坐標往左移動24px和往上移動100px就能取到
三、使用步驟
1.我們需要用到CSS中兩個與背景圖片有關的屬性
-
background-image: url("圖片地址");
-
background-position: x坐標 y坐標;
2.現在我們以取vip3和4以及微博認證為例
3.創建三個div，寬高分別等於vip3和4以及微博認證大小，如vip3和4寬高都為16px，微博認證x及y坐標分別為95px 35px
- 創建三個div
- 指定寬高、背景圖片、圖標所在位置
- 顯示效果
四、程序源碼
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>index</title>
-
<style>
-
div{
-
width: 16px;
-
height: 16px;
-
background-image: url("images/icon.png");
-
}
-
/* 從精靈圖片中獲取需要的圖片 */
-
.vip3{ /* 獲取vip3 */
-
background-position: -24px -48px;
-
}
-
.vip4{ /* 獲取vip4 */
-
background-position: -24px -72px;
-
}
-
.auth{ /* 獲取微博認證 */
-
width: 95px; /* 微博認證和vip大小不一樣，需單獨指定 */
-
height: 35px;
-
background-position: -425px -50px;
-
}
-
</style>
-
</head>
-
<body>
-
<!-- 設置三個div顯示 -->
-
<div class="vip3"></div>
-
<div class="vip4"></div>
-
<div class="auth"></div>
-
</body>
-
</html>