javascript - 图像精灵作为网页上的背景

Question

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

基本上我想要的外观是 Minecraft 的 2d 表示，草线以上的所有内容都是页眉，基岩作为页脚。

类似于www.projectminecraft.com和www.dokucraft.co.uk

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

Answer 1

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

如果不可能平铺整个东西，那么尝试尽可能多地平铺（边缘和底部通常是一个好地方）。不要忘记您可以在现代浏览器中使用多个背景图像（查看它们在 caniuse.com 上的浏览​​器中的采用）。

但是，您列出的第二个示例确实使用了一个 largepng，在这种情况下，您应该确保只使用所需的最少颜色，并尽可能使用http://imageoptim.com/之类的东西压缩图像。

Answer 2

要使用 sprite-sheet，请创建一个包含所有图像的大 png（或 jpg，如果您愿意并且没有透明度）。（示例）

接下来，对于您想要拥有图像的每个元素，将背景设置为：

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

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

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

希望这可以帮助！