css - CSS 中的媒体片段 URI 替代方案?

标签 css css-sprites sprite-sheet

因此,我希望使用 sprite 表在 CSS 中制作背景图片。需要说明的是,不,我不会去 this effect .我有一个完整的 sprite 表,我想在表上取一个 16px x 16px 的正方形并将其设置为将重复的背景。

在未来的某个时候,我希望能够通过 spacial dimensions using media fragments in the URL parameter 做到这一点, 但由于这个 isn't supported yet我正在寻找替代方案。有什么方法可以通过现代 CSS 技术或 hack 获得同样的效果吗?

一些注意事项:

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

最佳答案

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

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

例子在 http://jsfiddle.net/47CMr/2/

关于css - CSS 中的媒体片段 URI 替代方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8876259/

相关文章:

css - 在 UL 水平菜单中使用 Sprite

Css Sprites - 我的文件太大了吗?

javascript - Pixi.js 从动画 gif 文件生成 SpriteSheet 动画或 MovieClip

javascript - 使用 EaselJS 加载 sprite 表

css - 使用多种样式触发CSS中的单一样式

html - 如何使图像在表格单元格内响应(td)

html - 使用带有 IMG 标签的 Sprite ?

unity-game-engine - unity2d spritesheet和spritepacker有什么区别?

html - 在 Chrome 中设置 initial-scale=1.x 时, block 级元素之间有额外的垂直空间

html - 图标大小不正确(字体很棒)