什麼是CSS中的精靈技術

Question

我想知道關於快速訪問網頁的CSS中使用的精靈技術。

Answer 1

他們很酷，因爲你可以最小化HTTP請求與他們，並使您的網頁的性能改善。他們在SEO方面也被認爲是好的。看看本作的詳細信息：

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 2

This page給出了一個很好的概述。

本質上，它將所有頁面的圖像放入一個大圖像文件，然後使用CSS僅顯示該文件的部分內容（以提供多個圖像的效果）。這具有隻需要瀏覽器對所有圖像發出一個請求而不是一堆單獨請求（每個請求都有開銷）的優點。

Answer 3

如果你有一羣例如圖標，您要創建一個JPG或PNG文件，並添加圖像此起彼伏。然後，您僅基於一個圖像創建背景並以百分比/像素視圖進行修復。它使您的代碼組織起來並節省圖像加載時間。例如，你有一個窗口，它有一個接近，展開的圖標。你可以創建一個名爲windowControlSprite.png的png文件，它包含兩個圖標，然後你可以在你的css中創建這個元素的屬性。 #somediv {背景位置：0像素-20px;}

Answer 4

此外，您還可以使用工具很容易地找到CSS精靈的X和Y像http://www.getspritexy.com/

否則，你需要使用圖像編輯工具，如Photoshop或使用Firebug發現X和Y座標。