javascript - 非 Sprite CSS/Javascript 处理许多小图像

Question

大家好:我正在寻找一种网页技术，它允许我提供一个包含许多小图像(可能是数百个)的大图像，用作某些 div 或 li 的背景图像。

这听起来像是 CSS sprites 的工作，除了一件事: Sprite 依赖于封闭的 div(或框)来仅显示一张图像。

但是，我想要使用图像的区域是任意大于单个 Sprite 图像(以及我可能在它们之间留下的任何空间)的区域。这是 CSS3 媒体片段提案中解决的一个案例，该提案似乎尚未广泛实现。

此外，这些image hacks看起来很有用，但只能在可以插入额外跨度(或 :before 机制)的情况下工作。

假设有人想避免这种情况，是否有一种技术可以通过一些聪明的 JavaScript 来实现这一点？例如，是否有一种实用的技术可以将一张大图像传送到浏览器，让 JavaScript 在内存中将其分割，并将各个图像分配给不同的 CSS 背景规则？

Answer 1

使用数据 URL。将多个图像编码在一个字符串数据中，并对字符串中的单个图像进行解码。

您可以搜索“data-url image sprite”来了解更多信息。