CSS中的媒体片段URI替代方案？

Question

所以，我想使用精灵图表在CSS中设置背景图片。为了明确，我不是要实现this effect。我有一个完整的精灵图表，我想将其上的16像素乘16像素的正方形设置为重复的背景。

在未来的某个时候，我希望能够通过使用URL参数中的媒体片段设置特殊尺寸, 但由于这目前还不支持，我正在寻找替代方法。是否有任何现代CSS技术或黑客方式可以实现相同的效果？

一些注意事项：

• 我不需要支持旧版本浏览器，只需要最新版本的Firefox或Chrome。
• 我更喜欢纯CSS解决方案。如果有必要，我可以创建JS / Canvas解决方案并使用data：URI，但考虑到我可能需要使用的元素数量，如果可以通过纯CSS获得更好的结果，我宁愿不这样做。
• 需要在x和y方向上重复。
• 寻找利用单个内存/缓存中的图像的解决方案，以便我不必为每个要插入的精灵加载精灵表。

- LoveAndCoding

---

你提到了数据URI，但只是在JavaScript方面 - 你可以使用数据URI并拥有“纯CSS”解决方案。http://jsfiddle.net/47CMr/ - 这个应该能够满足你的大部分需求。具体来说，不需要下载任何其他文件，并且可以缓存它，这样他们只需要下载一次文件即可。 - SpoonNZ

@SpoonNZ：我的眼睛！护目镜，毫无作用！但说真的，在这里使用数据URI在CSS中并不是特别有用，因为你仍然需要手动生成它们。 - BoltClock

@SpoonNZ 这不是我想要的。我有一个作为PNG的精灵表。这会增加任何CSS样式的文件大小（除非我为我拥有的每个精灵都做一个类，包括可以跨越多个精灵位置的精灵），并且意味着我需要将每个精灵转换为数据URL。我的目标是能够根据x和y以及宽度和高度动态获取图像，而那种方法并不是很好。 - LoveAndCoding

是的，我意识到这很糟糕！不过在大多数浏览器中它确实可以工作，如果你不经常更改精灵图，那么它可能是一个“设置并忘记”的事情。我可能会将图像放在单独的样式表中，并使用类（或CSS预处理器使其可读）。但仍然不是一个好的解决方案。 - SpoonNZ

Answer 1

这是一个纯CSS解决方案，只在Firefox浏览器中有效，但似乎符合您的所有要求。

body{ background-image: -moz-image-rect(
    url('http://placekitten.com/500/500'),
    0,100,100,0
); }

在http://jsfiddle.net/47CMr/2/上有一个示例:

- SpoonNZ

---

正是我所需要的。甚至还有可能支持webkit。不过，看起来它已经不在规范中了，所以我们要看看它能否持续下去。我会在可以的时候颁发奖励（我必须等待）。 - LoveAndCoding

我的谷歌搜索表明将来CSS规范中会有一些东西 - 我在fiddle中尝试了它，但它在火狐和Chrome中都没用，所以今天没什么用... - SpoonNZ

嗯，你是指除了媒体片段URI规范之外的其他内容吗？因为我没有看到任何与背景相关的支持它的东西... - LoveAndCoding

请查看http://www.w3.org/TR/2012/WD-css3-images-20120112/的第3节 - 当我第一次偶然发现它时，我没有注意到它只有一周的历史，这可能是为什么它不太普遍的原因。不会惊讶于很快看到Chrome / FF / Opera采用并运行它。也不会惊讶于看到它消失。 - SpoonNZ

哈哈，我想你是指像 ('sprites.svg#xywh=40,0,20,20') 这样的例子吧？那是媒体片段 URI，这正是我在寻找替代方案的原因 ;) - LoveAndCoding

啊，原来如此！我没去看周围的内容，只看了语法。#聪明 - SpoonNZ

Answer 2

只有一种方法符合您的条件（最难的是需要重复）：使用 border-image。

示例代码：http://dabblet.com/gist/1635890

关键在于：您可以使用 border-image 属性的 border-image-slice 部分标记要使用的部分。语法有点棘手，但使用它，您可以从边框图像创建不同的重复图案。此外，当所需部分不在边缘上时，或者当您需要在X和Y上同时重复图像时，您需要一个 clip 属性，因此您需要将块绝对定位。所有这些功能甚至在Opera中都有效。

但是，有一件非常糟糕的事情：border-image 的中心部分渲染很麻烦：不仅在webkit和mozilla之间存在差异，而且在Safari和Chrome之间也存在差异，因此我在那里添加了许多hack。

总之：目标可以实现，但需要进行一些麻烦的技巧操作。

因此，我建议您使用data:uri，因为在Webkit和Fx中都没有其他方法来完成这个任务（在仅Fx中，您可以使用如上所述的-moz-image-rect）。

- kizu

---

使用一个巨大的边框和边框图像并不是我考虑过的事情。而且我只需要支持一个浏览器。这是为了一个HTML5游戏，任何一个浏览器都可以。基本上，我正在使用它来测试/展示新技术，所以对于一些东西来说，越前瞻性越好。谢谢建议 :) - LoveAndCoding

是的，对于展示新技术来说，“image-rect”更好一些。我的版本只是一个hack :) - kizu