CSS Sprites Повторяющиеся изображения

Question

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

Спасибо.

Answer 1

Короткий ответ «нет».

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

Answer 2

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

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

Answer 3

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

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

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

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

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

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

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

Answer 4

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