Question

所以，我正在寻找使用精灵表在CSS中做背景图像。而且要明确，不，我不会去this effect。我有一个完整的精灵表，我想在工作表上采用16px×16px的正方形，并将其设置为将重复的背景。

在未来的某个时刻，我希望能够通过spacial dimensions using media fragments in the URL parameter来做到这一点，但是因为isn't supported yet我正在寻找替代方案。有没有办法通过现代CSS技术或黑客获得同样的效果？

一些说明：

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

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/

的示例

Answer 2

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

带演示的dabblet：http://dabblet.com/gist/1635890

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

但是，有一个坏的，坏的事情：边界图像的中心部分的渲染是一个凯利地狱：不仅webkit和mozilla之间存在差异，甚至在Safari和Chrome之间也存在差异，所以我添加了一个那里很多黑客。

总之：目标可以实现，但是还有很多黑客。

所以，我建议你使用数据：uri，'因为没有其他方法可以在webkits和Fx中执行此操作（在Fx中，你可以使用上面提到的-moz-image-rect）

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

2 个答案: