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

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

3 голосов
/ 16 января 2012

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

В какой-то момент в будущем я надеюсь, что смогучтобы сделать это с помощью пространственных измерений с использованием мультимедийных фрагментов в параметре URL , но поскольку это пока не поддерживается Я ищу альтернативу.Есть ли способ получить такой же эффект с помощью современных методов CSS или хаков?

Некоторые примечания:

  • Мне не нужно поддерживать старые браузеры,подойдет только последняя версия FF или Chrome.
  • Я бы предпочел чистые CSS-решения.Я могу и буду создавать решение JS / Canvas с данными: URI, если мне нужно, но учитывая, сколько элементов мне может понадобиться, я бы предпочел не делать этого, если смогу добиться лучших результатов с помощью чистого CSS.
  • Нужно повторить в обоих направлениях x и y
  • Ищите решение, которое использует одно изображение в памяти / кеше, чтобы мне не приходилось загружать спрайт-листдля каждого спрайта я хочу вставить

Ответы [ 2 ]

2 голосов
/ 19 января 2012

Вот чистое решение CSS, которое работает только в Firefox, но, кажется, отвечает всем вашим требованиям. 

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

Пример на http://jsfiddle.net/47CMr/2/

1 голос
/ 19 января 2012

Существует только один метод, который подпадает под ваши условия (самый сложный - необходимость повторить): использование border-image.

Игра с демо: http://dabblet.com/gist/1635890

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

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

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

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

...