我們學習CSS背景的應用——CSS 精靈圖。

　　什么是精靈圖呢?先來看一個案例——在這個頁面中，使用到了各種各樣的小圖片。

　　如何在頁面中插入這些小圖片呢?你的思維慣性，一定是應用 img 或者 background-image 來實現。大家思考一下，如果頁面中只有幾個簡單的圖片素材，我們可以采用 img 元素來引入圖片，可是當網站圖片過多的時候，一張圖片一張圖片的引入，就顯得不方便了。

　　最重要的是，每張圖片的顯示，都是由瀏覽器發送請求，通過互聯網，服務器接收到請求后，再通過互聯網，返回請求內容。如果一個頁面里有上百張圖片，哪怕是很小的圖標，都需要經歷一次這樣的過程。毋庸置疑，因為請求網絡資源過于頻繁，整個頁面的加載速度就會變慢。

　　此時，我們就可以使用精靈圖技術來解決這個問題了!

　　精靈圖，也稱雪碧圖、妖怪圖，基本原理就是將頁面中使用到的各種圖片進行分類，整齊劃一的擺在一張背景透明的圖片上面，通過 CSS 的背景技術實現圖片的引入，從而減少服務器發送和接收請求的次數，提高頁面的加載速度。

　　例如，頁面中有一個元素，使用 background-image 的方法，插入一張精靈圖。

　　默認背景圖片的左上角字母“a”顯示在元素內部，如果想要將字母 O 顯示在元素中，就要使用background-position 屬性調整背景圖片的位置。

　　在 ps 軟件中打開精靈圖( ps.gaoding.com)，使用圈選工具，從圖片的左上角測量到字母"O"的左上角，測量距離為：水平 390px，垂直 105px。

　　因為背景圖片整體需要向左上角移動，所以 background-position 的值兩個方向都是負數：分別為 -390px 和 -105px。此時，字母 o 已經顯示在元素內部。

　　如果位置測量有偏差，可以在瀏覽器的開發者工具中，找到頁面元素，選中屬性值，按下鍵盤的上下箭頭，對屬性值進行微調，位置調整滿意后，根據這個值來修改樣式。

　　也許你會問，精靈圖是前端工程師制作的嗎?實際上，在團隊的網站開發中，網頁所需要的各種圖片，UI設計師都會為我們準備好，我們直接使用即可。

　　接下來，我們就使用精靈圖技術，完成 “千鋒” 拼音首字母的展示。

　　創建 014-sprites 文件夾，在文件夾下創建 sprites.html 文件和 sprites-style.css 文件，打開html，構建基礎代碼，引入外部樣式。

　　使用 emmet 命令：div.box$*2 快速創建兩個帶有類名的 div 元素。

　　HTML

　　<div class="box1"></div>

　　<div class="box2"></div>

　　打開 css 文件，定義 div 元素選擇器，聲明樣式：width: 50px，height: 70px，border: 2px solid gray。

　　先看一下效果，兩個帶有灰色邊框，縱向排列的容器就做好了!

　　繼續給 div 添加樣式：float: left，margin: 10px。

　　此時，容器已經橫向顯示，容器之間也有了間距。

　　CSS

　　div{

　　width:50px;

　　height:70px;

　　border: 2px solid gray;

　　float:left;

　　margin:10px;

　　}

　　再定義一個 .box1 選擇器，聲明樣式：background: url(sprites.png) no-repeat。

　　預覽一下效果，字母 “a” 已經在第一個容器中顯示出來。

　　在 ps 中使用圈選工具，測量圖片左上角到字母 “q” 左上角的水平距離為 545px，垂直距離為 110px。

　　給 background 屬性追加樣式值：-545px -110px。

　　這樣，字母 “q” 就顯示出來了!如果對位置不滿意，可以在這里微調。

　　CSS

　　.box1{

　　background:url(sprites.png) no-repeat -545px -105px;

　　}

　　重復前面的操作。在 ps 里測量字母 f 的位置，水平方向 390px，垂直方向 20px。

　　再定義一個 .box2 選擇器，聲明樣式：background: url(sprites.png) no-repeat -390px -20px;

　　再看一下效果，字母 “f” 也顯示出來了。也可以微調一下位置。

　　CSS

　　.box2{

　　background:url(sprites.png) no-repeat -386px -14px;

　　}

上一篇

什么是CSS盒模型呢？

下一篇

什么是CSS列表？