CSS-спрайты, повторяющие изображения

Question

Мне было интересно, есть ли способ использовать только одно изображение для повторяющихся и неповторяющихся изображений с использованием css-спрайтов.Поэтому в этом случае я хотел бы объединить все изображения на странице, независимо от их ширины и высоты, и будут ли они использоваться в качестве повторяющихся или неповторяющихся изображений.Я знаю, что стандартом является создание 1 изображения с использованием всех неповторяющихся изображений и другого изображения с использованием всех повторяющихся изображений.Но я просто хотел знать, смогу ли я просто использовать 1 изображение для всего.

Спасибо.

Answer 1

Краткий ответ "нет".

Объяснение состоит в том, что повторяющиеся изображения отображаются полностью в любом направлении, в котором они повторяются. Таким образом, фон, установленный на repeat-x, покажет весь контент изображения в горизонтальном направлении. Вот почему вы не можете повторять в обоих направлениях одновременно, используя спрайты.

Answer 2

@ Райан Кинал прав, говоря в своем ответе , что спрайтовое изображение нельзя использовать для повторения фоновых изображений (в обоих направлениях).

Есть еще способ сделать это кросс-браузерным только с одним или двумя файлами (не изображениями), но это не так просто и должно оказаться сложным для изменения (хотя спрайты также сложны для изменения, но по крайней мере это визуально!).

• данные: кодировка base64 для современных браузеров и IE8 +
• MHTML для IE7 и ниже (см. Комментарии для IE7 в Vista), переоткрыт или переведен Стояном Стефановым

Как указано в статье PHPIED, встроенные изображения повторяются дважды, но с помощью 3 условных комментариев вы можете нацелить IE7 и ниже с помощью файла MHTML, IE8 и выше с данными: файл base 64 и! IE с тот же файл данных.

В итоге вы получите 5 разных файлов на вашем сервере и 4 загруженных из любого браузера:

• изображение с no-repeat -спрайтами
• изображение с repeat-x -спрайтами
• изображение с repeat-y -спрайтами
• файл для MHTML (должен обслуживаться в IE7 и ниже) background-images
• файл для тех же повторяющихся фоновых изображений, но данных, закодированных для браузеров IE8 + и! IE

Большие повторяющиеся изображения не должны кодироваться, так как размер файла может сильно увеличиться, ваш дизайн может отличаться.

Answer 3

Я знаю, что стандарт заключается в создании 1 изображение с использованием всех неповторяющихся изображения и другое изображение, используя все повторяющиеся изображения.

Я думаю, что вы ошибаетесь. Невозможно выборочно фрагментировать сегмент изображения. Вы можете только мозаичное изображение полностью. Таким образом, все повторяющиеся изображения должны жить в своих собственных файлах изображений.

Answer 4

К сожалению, вы не можете заставить оба вида изображений работать на одном и том же спрайте. Обычно повторяющееся изображение - это небольшая часть большего изображения (градиент), которую можно повторять, чтобы сэкономить время и размер загрузки. Вы можете повторять изображения по горизонтали, вертикали и обоим.
repeat-x, repeat-y или просто repeat для обоих. Для неповторяющихся изображений на спрайте необходимо указать координаты прокрутки, например scroll 60px -20px (60 пикселей - левая координата, а -20 пикселей - верхняя координата).