图片精灵作为网页上的背景

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/之类的东西压缩图像。