3

所以，我正在寻找使用精灵表在 CSS 中制作背景图像。为了清楚起见，不，我不会追求这种效果。我有一个完整的精灵表，我想在表上取一个 16 x 16 像素的正方形并将其设置为将重复的背景。

在未来的某个时候，我希望能够使用 URL 参数中的媒体片段通过空间维度来做到这一点，但由于这还不支持，我正在寻找替代方案。有没有办法通过现代 CSS 技术或黑客来获得同样的效果？

一些注意事项：

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

2 回答 2

2

这是一个纯 CSS 解决方案，仅适用于 Firefox，但似乎满足您的所有要求。

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

http://jsfiddle.net/47CMr/2/上的示例

于 2012-01-18T21:19:39.683 回答
1

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

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

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

但是，有一件很糟糕的事情：border-image 的中心部分的渲染是一个 kelly 地狱：不仅 webkit 和 mozilla 之间存在差异，甚至 Safari 和 Chrome 之间也存在差异，所以我添加了很多 hack那里。

总之：目标可以实现，但需要大量的黑客攻击。

因此，我建议您使用 data:uri，因为在 webkits 和 Fx 中都没有其他方法可以做到这一点（在 Fx 中，您可以使用-moz-image-rect上述方法）。

于 2012-01-18T22:32:11.393 回答