“ спрайты изображений ” — это метод, при котором создается одно большое изображение, состоящее из нескольких отдельных изображений. И любая часть большого изображения может отображаться в соответствии с требованиями дизайна. Это помогает разработчикам плавно создавать визуально привлекательные элементы. Спрайты изображений можно использовать для значков, кнопок и других графических элементов. В этой статье демонстрируется пошаговая процедура использования спрайтов изображений в CSS.
Как использовать я Маг Спрайты в CSS?
В CSS разработчики используют спрайты изображений, чтобы свести к минимуму/уменьшить время загрузки веб-страницы. Это помогает сократить HTTP-запросы, обеспечивает более быструю загрузку и улучшает фактор взаимодействия с пользователем. Например, посетите приведенный ниже пример:
Пример: использование спрайта изображения в элементе списка
В этом примере создается упорядоченный список, и в каждом элементе списка на экран выводится часть изображения спрайта.
Условие:
Чтобы получить конкретное изображение из спрайта изображения, размеры используемого спрайта изображения особенно важны. Например, изображение размером « 937×156 ” показано ниже:
Выполните следующие шаги, чтобы отобразить часть показанного выше изображения:
Шаг 1: Создание элементов списка
Неупорядоченный список создается на веб-странице, как показано в приведенном ниже фрагменте кода:
< ул >Пустой: < что идентификатор '=' 'пустой' > что >
Половина: < что идентификатор '=' 'половина' > что >
Полный: < что идентификатор '=' 'полный' > что >
ул >
Описание приведенного выше фрагмента кода:
-
- Во-первых, используйте « <ул> », чтобы создать контейнер/среду для « неупорядоченный список ' и создайте три элемента списка, используя ' <это> ' ярлык.
- Затем назначьте идентификаторы « пустой », « половина ' и ' полный ” для трех элементов списка. Они используются позже для отображения части большего изображения.
Шаг 2: Отображение первого изображения
Чтобы отобразить пустое сердце на веб-странице, которая является первым изображением в спрайте изображения. Использовать ' пустой ” id и вставьте следующий код:
#пустой {ширина: 157 пикселей;
высота: 150 пикселей;
фон: адрес ( .. / спрайт.jpg ) 0 0 ;
}
В приведенной выше строке кодов:
-
- Сначала установите « ширина ' и ' высота изображения, которое разработчик хочет отобразить на веб-странице.
- Эти свойства присваиваются значениям « 157 пикселей ' и ' 150 пикселей ” в соответствии с приведенным выше примером, но они могут различаться относительно изображений с разными размерами.
- Затем укажите путь к « спрайт ” на “ фон ' свойство. Теперь установите направление « 0 ' и ' 0 ” и отображает первую часть спрайта изображения.
После выполнения приведенной выше строки кода веб-страница выглядит так:
На приведенном выше снимке показано, что первое изображение из спрайта изображения отображается на веб-странице.
Шаг 3: Отображение среднего и последнего изображения
Для отображения средней и последней части изображения из спрайта изображения вставьте следующие свойства CSS:
#половина {ширина: 157 пикселей;
высота: 150 пикселей;
фон: адрес ( .. / спрайт.jpg ) -462px 0px
}
#полный {
ширина: 157 пикселей;
высота: 150 пикселей;
фон: адрес ( .. / спрайт.jpg ) -770px 0px
}
Описание приведенного выше фрагмента кода:
-
- Сначала выберите « половина ” id и вставьте те же свойства CSS, которые использовались на предыдущем шаге.
- Чтобы отобразить среднее изображение из спрайта изображения, измените направление или назначьте отступ с левой стороны. Например, направление слева установлено на « минус 462px ».
- Таким же образом отобразите последнее изображение, установив направление слева на « -770px ».
После выполнения вышеуказанных свойств CSS веб-страница выглядит следующим образом:
Приведенный выше снимок показывает, что три изображения из спрайта изображения были отображены на веб-странице.
Заключение
“ спрайты изображений ” — это одно большое изображение, состоящее из нескольких изображений меньшего размера, как и функция коллажа. И любая часть большого изображения, представляющая меньшее изображение, может быть отображена. В соответствии с требованиями с помощью « фон », предоставленное CSS. Чтобы отобразить конкретное изображение из спрайта изображения, сначала установите ширину и высоту изображения. После этого используйте значения направлений для отображения только части изображения из спрайта изображения.