CSS 圖像精靈

圖像精靈

圖像精靈是單個圖像中包含的圖像集合。

包含許多圖像的網頁可能需要很長時間才能加載，同時會生成多個服務器請求。

使用圖像精靈將減少服務器請求的數量并節約帶寬。

圖像精靈 - 簡單的例子

我們使用以下單幅圖像（"navsprites.gif"）而不是使用三幅單獨的圖像：

導航圖像

通過使用 CSS，我們可以僅顯示所需圖像的某個部分。

在下面的例子中，CSS 指定了顯示 "navsprites.gif" 圖像的哪部分：

實例

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

親自試一試

例子解釋：

  • <img id="home" src="trans.gif"> - 僅定義小的透明圖像，因為 src 屬性不能為空。而實際顯示的圖像將是我們在 CSS 中指定的背景圖像。
  • width: 46px; height: 44px; - 定義我們要使用的圖像部分
  • background: url(navsprites.gif) 0 0; - 定義背景圖片及其位置（left 0px, top 0px）

圖像精靈 - 創建導航列表

我們希望使用精靈圖片（"navsprites.gif"）來創建一個導航列表。

我們將使用 HTML 列表，因為它可以是鏈接，同時還支持背景圖片：

實例

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

親自試一試

例子解釋：

  • #navlist {position:relative;} - 位置設置為相對，以允許在其中進行絕對定位
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外邊距和內邊距設置為 0，刪除 list-style，并且所有列表項都均為絕對定位
  • #navlist li, #navlist a {height:44px;display:block;} - 所有圖片的高度均為 44px

現在開始為每個特定部分設置定位和樣式：

  • #home {left:0px;width:46px;} - 一直向左定位，圖像寬度 46px
  • #home {background:url(navsprites.gif) 0 0;} - 定義背景圖片及其位置（left 0px, top 0px）
  • #prev {left:63px;width:43px;} - 向右定位 63px（#home 寬度 46px + 項目之間的一些額外空間），寬度 43px。
  • #prev {background:url('navsprites.gif') -47px 0;} - 定義背景圖片向右 47px（#home 寬度 46px + 1px 分隔線）
  • #next {left:129px;width:43px;} - 向右定位 129px（#prev 開始是 63px + #prev 的寬度是 43px + 多余的空格），寬度 43px。
  • #next {background:url('navsprites.gif') -91px 0;} - 定義背景圖片向右 91px（#home 寬度 46px + 1px 分隔線+ #prev 寬度 43px + 1px 分隔線）

圖像精靈 - 懸停效果

現在，我們要向導航列表中添加懸停效果。

提示：:hover 選擇器可用于所有元素，而不僅限于鏈接。

我們的新圖像（"navsprites_hover.gif"）包含三幅導航圖像和三幅用于懸停效果的圖像：

導航圖像

因為這是一幅圖像，而不是六個單獨的文件，所以當用戶將鼠標懸停在圖像上時，不會有加載延遲。

我們僅添加三行代碼來實現懸停效果：

實例

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

親自試一試

例子解釋：

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我們為所有三個懸停圖像指定相同的背景位置，僅向下 45 像素