css優化

Question

我注意到，digg.com和google.com在他們的gif頭圖像中使用了一種css優化。例如digg使用這個圖像http://digg.com/img/menu-current.gif。

任何人都可以給我一個想法，爲什麼他們使用這種技術，以及如何在我自己的網站做到這一點？

問候，

Answer 1

CSS精靈：死亡的影像抽離之吻：
A List Apart

• 另一篇文章在Smashing Magazine
• 一劈到support IE6

這種技術的目的通過組合所有圖像來減少HTTP請求。

Answer 2

這些被稱爲CSS精靈。它們用於減少服務器請求的數量。

退房關於他們這個漂亮的文章：http://www.alistapart.com/articles/sprites/

Answer 3

它被稱爲css sprite

Answer 4

我相信，這些被稱爲 接頭 （或者是精靈）;基本上他們加載整個圖像一次，並告訴CSS只顯示一部分，這樣他們就避免了（預先）加載大量和大量的圖像。

它們增加了對頁面的更多響應，因爲連續的圖像被立即加載。

正如weichsel所述，請查看文章@A List Apart。

Answer 5

他們使用該技術來下載一個圖像，而不是瀏覽器，可能會使許多不同的連接下載多個圖像。

然後，您可以使用諸如「background-position」和「width」等CSS屬性組合的方式將圖像「裁剪」爲CSS背景圖像。

其他人張貼的鏈接，而我寫這可能有很好的技術來裁剪圖像。