Введение в CSS-спрайты
Обычно это переводится как «сшивание изображений CSS» или «позиционирование текстуры CSS». CSS-спрайты — не новая технология. Она достаточно давно развилась в веб-разработке. Тень CSS-спрайтов можно найти повсюду на веб-страницах дочерних компаний Alibaba. Но CSS-спрайты — это не золотое правило, но во многих случаях они имеют определенные преимущества. Самое главное — они позволяют снизить нагрузку на сервер и улучшить скорость загрузки веб-страниц. Поскольку веб-дизайн развивается в более сложном и изобретательном направлении, дизайнеры начинают рассматривать возможность использования методов, отличных от Javascript, для создания эффектов при наведении курсора мыши и меню при наведении. В это время появился CSS Sprite.
Проще говоря, CSS Sprites фактически интегрирует некоторые фоновые изображения веб-страницы в файл изображения, а затем использует комбинацию CSS «background-image», «background-repeat» и «background-position» для позиционирования фона. Позиция может использовать числа для точного определения положения фонового изображения.
При загрузке страницы вместо загрузки каждого отдельного изображения загружается сразу все объединенное изображение. Это значительное улучшение. Оно значительно уменьшает количество HTTP-запросов, снижает нагрузку на сервер и сокращает задержку, необходимую для загрузки изображений при наведении, делая эффект более плавным и без пауз.
Статьи, связанные с CSS-спрайтами
Приложение CSS-спрайты
В этом отношении Taobao работает лучше. Позвольте мне взять Taobao в качестве примера.
Пример 1: навигация по странице канала Taobao
Рендеринг:
схема спрайтов:
