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

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

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

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

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

css sprite-sheet css-sprites
person LoveAndCoding    schedule 16.01.2012    source источник
comment
Вы упомянули Data URI, но только с точки зрения Javascript — вы можете использовать Data URI и иметь чистое решение CSS. jsfiddle.net/47CMr — это должно соответствовать большинству ваших целей. В частности, не будет дополнительных файлов для загрузки, и вы можете кэшировать их, чтобы им нужно было загрузить файл только один раз.   -  person SpoonNZ    schedule 19.01.2012
comment
@SpoonNZ: Мои глаза! Очки, они ничего не делают! Но если серьезно, URI данных не будут особенно полезны в CSS, поскольку вам все равно придется генерировать их вручную.   -  person BoltClock    schedule 19.01.2012
comment
@SpoonNZ Это не совсем то, что я ищу. У меня есть лист спрайтов в формате PNG. Это увеличило бы размер файла любых стилей CSS (если только я не создам класс для каждого спрайта, который у меня есть, включая те, которые могут охватывать более одного местоположения спрайта) и означало бы, что мне нужно будет преобразовать каждый из спрайты к URL-адресу данных. Моя цель состоит в том, чтобы иметь возможность, учитывая x и y, а также ширину и высоту, динамически получать изображение, для чего этот метод не очень подходит.   -  person LoveAndCoding    schedule 19.01.2012
comment
Да, я понимаю, что это ужасно! Тем не менее, он работает в большинстве браузеров, и если вы не меняете спрайт часто, это может быть установлено и забыто. Я бы, вероятно, поместил изображения в отдельную таблицу стилей и использовал классы (или препроцессор CSS, чтобы сделать их читабельными). Все же не очень хорошее решение.   -  person SpoonNZ    schedule 19.01.2012

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person SpoonNZ    schedule 18.01.2012
comment
Именно то, что я искал. И даже возможность поддержки webkit. Хотя похоже, что его больше нет в спецификации, так что посмотрим, продлится ли он. Присужу награду, когда смогу (мне нужно ее дождаться). - person LoveAndCoding; 19.01.2012
comment
Мой гуглинг показал, что в будущем в спецификации для CSS будет что-то - я попробовал это в скрипке, но это не сработало в FF или Chrome, поэтому сегодня мало что используется... - person SpoonNZ; 19.01.2012
comment
Хм, вы имеете в виду что-то другое, кроме спецификации URI медиафрагмента? Потому что я не видел ничего, связанного с фоном, который, казалось бы, поддерживал это... - person LoveAndCoding; 19.01.2012
comment
Ознакомьтесь с разделом 3 w3.org/TR/2012/. WD-css3-images-20120112 — я не заметил, когда впервые наткнулся на него, но ему всего неделя, и, возможно, поэтому он не слишком распространен. Не удивлюсь, если Chrome/FF/Opera возьмут это и скоро запустят. Также не удивлюсь, если он умрет. - person SpoonNZ; 19.01.2012
comment
Ха-ха, я полагаю, вы имеете в виду такие примеры, как ('sprites.svg#xywh=40,0,20,20')? Это URI медиафрагмента, которому я искал альтернативу;) - person LoveAndCoding; 19.01.2012
comment
Ааа, так оно и есть! Я не стал читать об этом, только синтаксис. #умный - person SpoonNZ; 19.01.2012

arrow_upward
1
arrow_downward

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

Дабблет с демонстрацией: http://dabblet.com/gist/1635890

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

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

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

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

person kizu    schedule 18.01.2012
comment
Использование одной гигантской рамки и изображения границы — это не то, о чем я думал. И мне действительно нужно поддерживать только один браузер. Это для игры HTML5, и любой браузер будет работать. В основном я использую его для тестирования/демонстрации новых технологий, поэтому в некоторых случаях чем больше перспектив, тем лучше. Хотя спасибо за предложения :) - person LoveAndCoding; 19.01.2012
comment
Да, для демонстрации новых технологий image-rect лучше. Моя версия просто хак :) - person kizu; 19.01.2012