圖片精靈作爲網頁上的背景

Question

有沒有一種方法來優化網站上基於精靈/紋理背景的頁面加載時間？

基本上我試圖去看的外觀是Minecraft的2D表示，草線以上的所有內容都是標題，底層是頁腳。

類似www.projectminecraft.com和www.dokucraft.co.uk

但我擔心的頁面加載時間，但希望有洞穴和其他細節。

Answer 1

要使用sprite-sheet，請創建一個包含所有圖像的大png（或jpg，如果您願意並且沒有透明度）。 （example）

接下來，你想有一個圖像的每個元素，背景設置是這樣的：

background:url(my-sprite-sheet.png) 10px 40px no-repeat;

在這個例子中，座標與你的精靈表。它告訴背景背景的左上角從圖像右側10px開始，從底部開始40px。 （奇怪的是，0 0將是你的圖像的左上角）

據我所知，你不能爲重複（平鋪）背景做到這一點。爲此，請將每個「瓷磚」作爲自己的圖像並使用類似background:url(my-background.png);的東西。默認情況下，圖像將在x軸和y軸上重複。您可以使用repeat-xrepeat-y和no-repeat進一步定義重複。

希望這會有所幫助！

Answer 2

對於重複內容的大背景，您希望創建最小形式的圖片，然後在您的CSS中使用background-repeat: repeat。

如果無法平鋪整個東西，那麼嘗試儘可能平鋪（邊緣和底部通常是一個好地方）。不要忘記，您可以在現代瀏覽器中使用多個背景圖片（see their adoption in browsers on caniuse.com）。

然而，您列出的第二個示例使用的是one large png，在這種情況下，您應該確保只使用所需的最小顏色並儘可能使用http://imageoptim.com/之類的東西壓縮圖像。