當前Google主頁 - 爲什麼使用css sprite而不是單個圖像？

google homepage

而不是使用這個作爲一個圖像的谷歌使用的CSS精靈。子畫面圖像

提供如下（尺寸變化）：

enter image description here

問題是爲什麼CSS子畫面使用一個單一的圖像，而不是？如果使用單個圖像，那麼HTTP請求的數量是否與此css sprite案例中的數量相同？

「圖像」的某些部分可以更改。這就是爲什麼大圖像是由許多小圖像組成的原因。 – 2013-03-11 08:10:19

單個圖像不允許在不同區域使用（不同）懸停效果。

或者您將不得不爲每個動畫加載相同大小的圖像。通過使用一個精靈，你只需要加載一次圖像，所有的動畫運行該數據。

2013-03-11 08:11:15 Sirko

因此，可以對不同的css sprite使用懸停效果？ – 2013-03-11 08:23:02

基本上你使用精靈的不同部分來構圖。在谷歌的例子中，你會看到一個普通的背景，然後在疊加層中看到很多小圖像。懸停效果現在歸結爲更改您使用的精靈區域。 – Sirko 2013-03-11 08:24:53

CSS精靈是一種方法，可以減少您網站引用的image資源請求的數量HTTP。 圖像在定義的X和Y座標處合併爲一個較大的圖像。

將此生成的圖像分配給相關頁面元素後，可以使用background-position CSS屬性將可見區域移動到所需的組件圖像。

2013-03-11 08:13:43

以便Google主頁 - 使用精靈來保留其他頁面，因爲該頁面中沒有其他圖像？ – 2013-03-11 08:14:57

@IstiaqueAhmed其他頁面的意思是.. ??如果我明白你的權利比是的，這是原因..想象一個頁面有500個圖標顯示，然後瀏覽器發送500請求，如果您在單個圖像中使用500圖標，那麼這將減少該請求。 – 2013-03-11 08:17:11

只有一個單一的圖像可以在Google主頁上使用，除非我考慮Sirko說的是什麼..我是對的嗎？ – 2013-03-11 08:19:12

回答