图像精灵作为背景在网页上

Question

有没有办法优化网站上基于精灵/纹理的背景的页面加载时间？

基本上我想要的外观是Minecraft的2d表示，草地上方的所有内容都是标题，而基石是页脚。

与www.projectminecraft.com和www.dokucraft.co.uk

类似

但是我担心页面加载时间，但想要有洞穴和其他细节。

Answer 1

对于重复内容的大背景，您需要创建一个以最小格式切片的图像，然后在CSS中使用background-repeat: repeat。

如果不能平铺整个东西，那么尽可能多地尝试平铺（边缘和底部通常是一个好地方）。不要忘记您可以在现代浏览器中使用多个背景图像（see their adoption in browsers on caniuse.com）。

然而，您列出的第二个示例使用了one large png，在这种情况下，您应该确保只使用所需的最小颜色，并尽可能使用{{3}来压缩图像。 }}

Answer 2

要使用精灵表，请创建一个包含所有图像的大png（或jpg，如果你愿意并且没有透明度）。 （example）

接下来，对于要获得图像的每个元素，将背景设置为：

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

在此示例中，坐标与您的精灵表相关。它告诉背景背景的左上角从图像右侧10px开始，从底部开始40px。 （奇怪的是，0 0将是你图像的左上角）

据我所知，你不能为重复（平铺）背景做到这一点。为此，将每个“tile”作为自己的图像并使用类似background:url(my-background.png);的内容。默认情况下，图像将在x轴和y轴上重复。您可以使用repeat-x repeat-y和no-repeat进一步定义重复。

希望这有帮助！