CSS中的媒体片段URI替代？ [英] Media Fragment URI Alternative in CSS?

问题描述

所以，我想用CSS做一个背景图片使用精灵表。为了清楚起见，我不打算这种效果。我有一个完整的精灵表，我想采取一个16px x 16像素的正方形，并将其设置为将重复的背景。

So, I'm looking to do a background image in CSS using a sprite sheet. And just to be clear, no I am not going for this effect. I have a full sprite sheet, and I would like to take a 16px by 16px square on the sheet and set it as the background that will be repeated.

在某点在未来，我希望能够通过使用媒体片段的空间维度在网址参数中，但由于此目前尚未支持我正在寻找替代方案。有什么方法可以通过现代CSS技术或黑客获得相同的效果吗？

At some point in the future, I hope to be able to do this via spacial dimensions using media fragments in the URL parameter, but since this isn't supported yet I'm looking for an alternative. Is there any way to get this same effect via modern CSS techniques or hacks?

一些注释：

• 我不需要支持旧的浏览器，只需最新的FF或Chrome即可。


• 我更喜欢纯CSS解决方案。我可以并将创建一个JS / Canvas解决方案与数据：URI的，如果我需要，但考虑我可能需要多少个元素，我宁愿不必这样做，如果我可以通过纯CSS获得更好的结果。 li>
  
• 需要在 x 和 y 中重复


• 寻找在内存/缓存中利用单个映像的解决方案，这样我就不必为每个要插入的精灵加载精灵表。

• I don't need to support old browsers, just the latest FF or Chrome will do.
• I would prefer pure CSS solutions. I can and will create a JS/Canvas solution with data:URI's if I need to but considering how many elements I may need this for, I would prefer to not have to do that if I can get better results via pure CSS.
• Need to repeat in both x and y directions
• Looking for solution that takes advantage of a single image in memory/cache so that I don't have to load the sprite-sheet for every sprite I want to insert

推荐答案

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

Here's a pure CSS solution that works in Firefox only, but seems to meet all your requirements.

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

http://jsfiddle.net/47CMr/2/

这篇关于CSS中的媒体片段URI替代？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！