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

原文 标签 css css-sprites sprite-sheet

所以,我希望使用 Sprite 表在 CSS 中制作背景图像。明确地说,不,我不会去 this effect .我有一个完整的 Sprite 表,我想在表上取一个 16px x 16px 的正方形并将其设置为将重复的背景。

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

一些注意事项:

  • 我不需要支持旧的浏览器,最新的 FF 或 Chrome 就可以了。
  • 我更喜欢纯 CSS 解决方案。如果我需要,我可以并且将创建一个带有 data:URI 的 JS/Canvas 解决方案,但考虑到我可能需要多少元素,如果我可以通过纯 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/

    相关文章:

    html - 高分辨率 CSS Sprite

    html - 通过符号或 css 包含内联 svg?

    PHP 类重写 CSS3 规则以实现跨浏览器兼容性

    javascript - 用滑动动画插入 div

    iphone - 使用CSS淡化UIWebView的底部

    CSS Sprite 生成器 : I have the bundled image

    css - 如何在固定菜单上创建透明的当前状态缺口?

    css - 从用户端取消划掉CSS属性

    android - 在 Android 中使用 Sprite 表动画

    css - 如何使用 Google Material Design Sprite 图标..?