部署CSS精靈

第一部分 – 第14章

CSS

當移動網站頁面使用大量圖片（例如超過20個）時，網站瀏覽器必須請求並下載每一個圖片文件，這會耗費相當多的時間並減緩移動網站頁面的加載。

然而，我們可以將這些圖片合併為一個單一圖片。這將減少http請求的數量，並使移動網站加載明顯加快。圖片的合併可以使用CSS精靈進行，其實現步驟如下：

  • 創建這個圖片。
  • 放置這個圖片。
  • 使用這個圖片。

合併並創建圖片

例如，我們有2個小圖片，大小均為50像素×50像素。

  • 通過合併這兩張圖片來創建一個單一圖片。合併後的圖片將成為大小為100像素×50像素的大圖片（例如寬是100像素，長是50像素）。
  • 將合併後的圖片命名為combined.png。

CSS Sprites

放置圖片

這張合併後的圖片實際上是由第一張圖片置於第二章圖片正上方的兩張圖片組成的。

將如下行添加到頁面的CSS文件上。

  • firstimg是定義好的類名。
  • 以寬度和高度的方式，指定第一張圖片（在合併後的單一大圖片combined.png內）的大小。
  • background:url(images/combined.png)- 我們將在div標籤中以背景圖片的方式使用該圖片。
  • 0 0px指定了圖片的坐標，指該圖片的位置從圖片combined.png的左上角開始。 
.firstimg {width:50px; height:50px; background:url(images/combined.png) 0 0px;}

我們還要在同樣的CSS文件中添加如下行。這行代碼是用來定義第二章圖片（在合併後的單一大圖片combined.png內）。注意圖片位置是從0 -50px開始。 

.secondimg {width:50px; height:50px; background:url(images/combined.png) 0 -50px;}

使用圖片

在一個空的div標籤內指定類firstimg， 從而在網站頁面的HTML代碼中使用第一張圖片。 

<body>
<div class="firstimg"></div>
</body>

在一個空的div標籤內指定類secondimg，從而在網站頁面的HTML代碼中使用第二張圖片。 

<body>
<div class="secondimg"></div>
</body>

移動網站性能技術白皮書在2017年3月正式出版。

英文版：Implement CSS Sprites – 簡體中文版：部署CSS精靈






移動網站性能技術白皮書上的內容按下列許可協議發布： CC Attribution-Noncommercial 4.0 International