Спрайты и почему они используются.
Sprite — это несколько изображений, объединенных в одно изображение. Причина его использования заключается в том, как работает протокол передачи гипертекста (также известный как HTTP). Всякий раз, когда веб-страница загружается по протоколу HTTP, все изображения на веб-странице загружаются в виде отдельных запросов к серверу. При этом используется значительная часть полосы пропускания, которую можно сэкономить с помощью спрайтов. Несмотря на то, что спрайт представляет собой набор изображений, для получения необходимых изображений требуется только один запрос к серверу, поскольку все эти изображения хранятся в одном файле.
Как использовать спрайты в CSS.
- Вывод
- HTML
- CSS (SCSS)
В приведенном выше примере показано, как спрайты используются в CSS. На вкладке CSS определены два селектора идентификаторов. Первый предназначен для графического логотипа Educative, а второй — для текстового логотипа. Атрибут background используется для определения местоположения обоих изображений в исходном изображении. Для этого используется следующий формат: background: url (местоположение изображения) , расстояние слева от верха.
В приведенном выше примере расстояние для графического логотипа было 120120 120 пикселей слева и 90 90 90 пикселей от верха. Точно так же расстояние для текстового логотипа было 17 17 17 пикселей слева и 1 6 5 165 165 пикселей сверху.
Знаки минус в коде присутствуют потому, что чем правильнее что-то, тем отрицательнее оно на горизонтальной оси и чем ниже что-то, тем отрицательнее оно на горизонтальной оси. вертикальная ось. Левый верхний угол изображения — это начало координат , где координаты равны (0, 0).
