Einführung in CSS-Sprites
Es wird normalerweise als „CSS-Bildzusammenfügung“ oder „CSS-Texturpositionierung“ übersetzt. CSS Sprites ist keine neue Technologie, sie hat sich in der Webentwicklung relativ ausgereift. Der Schatten von CSS Sprites ist überall auf den Webseiten der Alibaba-Tochtergesellschaften zu finden. Aber CSS Sprites ist keine goldene Regel, hat aber in vielen Fällen gewisse Vorteile. Das Wichtigste ist, dass es die Belastung des Servers reduzieren und die Ladegeschwindigkeit von Webseiten verbessern kann. Da sich das Webdesign in eine immer anspruchsvollere und raffiniertere Richtung entwickelt, beginnen Designer darüber nachzudenken, Nicht-Javascript-Methoden zu verwenden, um Mouseover- und Hover-Menüeffekte zu erstellen. Zu dieser Zeit entstand CSS Sprite.
Um es ganz klar auszudrücken: CSS Sprites integriert tatsächlich einige Hintergrundbilder auf der Webseite in eine Bilddatei und verwendet dann die Kombination aus CSS „Hintergrundbild“, „Hintergrundwiederholung“ und „Hintergrundposition“, um den Hintergrund zu positionieren. Position kann Zahlen verwenden, um die Position des Hintergrundbilds genau zu lokalisieren.
Wenn die Seite geladen wird, wird nicht jedes einzelne Bild geladen, sondern das gesamte kombinierte Bild auf einmal. Dies ist eine große Verbesserung, die die Anzahl der HTTP-Anfragen erheblich reduziert, den Serverdruck verringert und die Zeitverzögerung verkürzt, die zum Laden von Bildern beim Schweben erforderlich ist, wodurch der Effekt reibungsloser und ohne Pausen erfolgt.
Artikel zu CSS-Sprites
CSS-Sprites-Anwendung
In dieser Hinsicht schneidet Taobao besser ab.
Beispiel 1: Navigation auf der Taobao-Kanalseite
Darstellung:
Sprites-Diagramm:
