Альтернатива URI для фрагментов медиа в CSS?

Question

Итак, я ищу фоновое изображение в CSS, используя лист спрайтов. И просто чтобы быть ясным, я не собираюсь за this effect. У меня есть полный лист спрайтов, и я хотел бы взять квадрат 16 пикселей на 16 пикселей на листе и установить его в качестве фона, который будет повторяться.

В какой-то момент в будущем, я надеюсь, что смогу это сделать через 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-slice часть border-image собственности. Синтаксис немного сложный, но с его помощью вы можете создавать разные повторяющиеся патерны из пограничных изображений. Кроме того, когда нужные части не находятся на краю или когда вам нужно повторить изображение как на X, так и на Y, вам понадобится свойство clip, поэтому вам понадобится блок, который будет абсолютным. Все это работает даже в Opera.

Но есть одна плохая, плохая вещь: рендеринг центральной части пограничного изображения - это келли ад: есть разница не только между webkit и mozilla, но даже между Safari и Chrome, поэтому я добавил там много хаков.

В заключение: цель может быть достигнута, но с адскими хаками.

Итак, я бы посоветовал вам использовать данные: uri, потому что в webkits и Fx нет других способов сделать это (в Fx-only вы можете использовать -moz-image-rect, как упоминалось выше).