CSS Sprites (Sprites)

CSS Sprites-Technologie ist eine Methode, um die Anzahl der HTTP-Anfragen an die Bildressourcen zu verringern, indem die Bilder in eine einzige Datei kombiniert werden.

Was ist ein Sprite-Bild

Subbilder sind zweidimensionale Bilder, die durch die Kombination kleiner Bilder zu einem großen Bild unter den festgelegten X- und Y-Koordinaten bestehen.

Um ein einzelnes Bild aus einer kombinierten Abbildung anzuzeigen, kann durch die Verwendung von CSS background-positionEigenschaften, die den genauen Ort des anzuzeigenden Bildes definieren.

Vorteile der Verwendung von CSS Image Sprite

Webseiten mit vielen Bildern, insbesondere mit vielen kleinen Bildern (z.B. Symbole, Schaltflächen usw.), können eine lange Zeit dauern, um zu laden und mehrere Serveranfragen zu erzeugen.

Die Verwendung von Image Sprites anstelle von separaten Bildern verringert die Anzahl der von Ihrem Browser an den Server gesendeten HTTP-Anfragen erheblich, was sehr effektiv ist, um die Ladezeit der Webseite und die gesamte Leistung der Webseite zu verkürzen.

Betrachten Sie die folgenden Beispiele, Sie werden einen deutlichen Unterschied sehen. Wenn Sie das Mauszeiger zum ersten Mal auf das Browser-Symbol der nicht-Sprite-Version setzen, erscheint nach einer Weile ein Hover-Bild, weil das Hover-Bild beim Überfahren vom Server geladen wird, da das normale Bild und das Hover-Bild zwei verschiedene Bilder sind.

und in der Sprite-Version, da alle Bilder in einem einzigen Bild kombiniert sind, wird das Hover-Bild sofort angezeigt, wenn der Mauszeiger darauf gehalten wird, was ein glatter Hover-Effekt erzeugt. Nach dem Einsatz von CSS Sprite kann der Benutzer durch den Zugriff auf das synthetisierte Bild die Anzahl der HTTP-Anfragen reduzieren und die Dateigröße verringern, was die Effizienz der Zugriffe erhöhen kann.

machen, dass der Bild-Sprite

durch10einzelnes Bild zu einer einzigen Datei (mySprite.pngherzustellen. Sie können jede bevorzugte Bildbearbeitungssoftware verwenden, um Ihren eigenen Sprite zu erstellen.

Symbol aus dem Bild-Sprite anzeigen

Schließlich können wir mit CSS nur einen Teil des erforderlichen Bild-Sprites anzeigen.

Zunächst erstellen wir die Klasse .sprite, die das Bild-Sprite lädt. Dies ist, um Duplikate zu vermeiden, da alle Elemente die gleiche Hintergrundbild teilen.

.sprite {
　　　　Hintergrund: url("images/mySprite.png) keine-wiederholen;
}

Nun müssen wir für jedes zu displayende Element eine Klasse definieren. Zum Beispiel, um das Internet Explorer-Icon anzuzeigen, ist der Bild-Sprite der CSS-Code.

.ie {
　　　　Breite:　50px;　/*　Icon-Breite　*/
　　　　Höhe:　50px;　/*　Icon-Höhe　*/
　　　　Anzeige: inline-Block;　/*　Icon als inline block anzeigen　*/
　　　　background-position: 0　-200px;　/*　Icon-Background-Position im Sprite　*/
}

Nun tritt ein Problem auf, wie können wir diese Pixelwerte erhaltenbackground-position؟ Lassen Sie uns die Antwort finden. Der erste Wert ist derhorizontale Positionder zweite ist dervertikale Position. Da der linke obere Eckpunkt des Internet Explorer-Icons den linken Rand berührt, beträgt der horizontale Abstand zu der Ausgangsposition (d.h. dem linken oberen Eckpunkt des Bild-Sprites)0und da es sich im5Positionen entfernt,daher ist der vertikale Abstand des Symbols von der Ausgangsposition des Bild-Sprites4 X 50px = 200px, da die Höhe jedes Symbols50px

Um das Internet Explorer-Icon anzuzeigen, müssen wir seinen linken oberen Eckpunkt auf den Ausgangspunkt bewegen, d.h. auf den linken oberen Eckpunkt des Bild-Sprites (mySprite.png). Außerdem, da der vertikale Abstand dieses Symbols200pxdaher müssen wir das gesamte Hintergrundbild (mySprite.png) vertikal nach oben verschieben200pxdies erfordert, dass wir den Wert als Negativ anwenden-200pxWeisst, dass negative Werte es vertikal nach oben bewegen lassen, während positive Werte es nach unten bewegen. Allerdings ist keine horizontale Verschiebung erforderlich, da der linke obere Ecke des Internet Explorer-Icons zuvor keine Pixel hatte.

Navigation Menü mit CSS Image Sprite erstellen

Im vorherigen Abschnitt haben wir erfahren, wie man ein einzelnes Symbol aus einem Bild-Sprite anzeigt. Dies ist die einfachste Methode, um ein Bild-Sprite zu verwenden, und jetzt werden wir durch Aufbau einesWende Effektden nächsten Schritt in der Navigation Menü

Hier werden wir dasselbe Sprite-Bild verwenden (mySprite.png） ein Navigation Menü erstellen.

Navigation Grund HTML

Wir werden mit dem Erstellen eines HTML Ungeordnete ListeNavigation Menü beginnt.

<ul class="menu">
　　　　<li class="firefox"><a href="#">Firefox</a></li>
　　　　<li class="chrome"><a href="#">Chrome</a></li>
　　　　<li class="ie"><a href="#">Explorer</a></li>
　　　　<li class="opera"><a href="#">Opera</a></li>
　　　　<li class="safari"><a href="#">Safari</a></li>
</ul>

CSS auf der Navigation anwenden

Die folgenden Abschnitte werden erläutern, wie man eine einfache ungeordnete Liste aus dem obigen Beispiel mit CSS in eine Navigation basierend auf schädlichen Bildern umwandelt.

Schritte1: Liste strukturiert zurücksetzen

Standardmäßig, HTML Ungeordnete ListeAnzeige als Punkteinträge. Wir müssen durch SetzenListe-Stil-TypEigenschaften werden auf "none" gesetzt, um die Standardpunkteinträge zu entfernen.

ul.menu {
　　　　Liste-Stil-Typ: none;
}
ul.menu li {
　　　　Abstand:　5px;
　　　　Schrift-Größe:　16px;
　　　　Schrift-Familie: "Trebuchet MS", Arial, sans-Schriftart: serif;
}

Schritte2: Allgemeine Eigenschaften für jeden Link festlegen

In diesem Schritt werden wir alle gemeinsamen CSS-Eigenschaften einstellen, die alle Links teilen. Zum Beispiel:Farbe,background-image,Anzeige,Abstandu.a.

ul.menu li a {
　　　　Höhe:　50px;
　　　　Zeile-Höhe:　50px;
　　　　Anzeige: inline-Block;
　　　　Abstand-links:　60px;　/*　Um Text vom Hintergrund zu trennen-image　*/
　　　　Farbe: #3E789F;
　　　　Hintergrund: url("images/mySprite.png) keine-wiederholen;　/*　As all links share the same background-image　*/
}

Schritte3: Setzen Sie den Standardstatus jeder Verbindung

Jetzt müssen wir für jeden Menüpunkt eine Klasse definieren, da jeder Eintrag im Bild-Sprite eine anderebackground-position. Zum Beispiel liegt das Firefox-Symbol am Anfang des Bild-Sprites, also links oben, und muss daher nicht verschoben werden. Daher beträgt die vertikale und horizontale Position des Hintergrunds in diesem Fall 0. Ähnlich kann man für andere Symbole im Bild-Sprite auch die Hintergrundposition definieren.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0　-100px;
}
ul.menu li.ie a {
　　　　background-position: 0　-200px;
}
ul.menu li.safari a {
　　　　background-position: 0　-300px;
}
ul.menu li.opera a {
　　　　background-position: 0　-400px;
}

Schritte4: Hover-Status des Links hinzufügen

Der Hinzufügen des Hover-Status hat das gleiche Prinzip wie das Hinzufügen der obigen Links. Es reicht aus, ihre linken oberen Ecken auf den Anfang des Bild-Sprites zu bewegen (d.h. links oben), wie wir oben getan haben. Man kannbackground-positionMan kann es einfach mit folgender Formel berechnen:

Die vertikale Position des Hover-Status = die vertikale Position im Normalzustand - 50px

Da das Mauszeigerbild genau unter dem Standardstatus liegt, beträgt die Höhe jedes Symbols50px. Der Hover-Status des Symbols erfordert keine horizontale Verschiebung, da vor dem linken oberen Ecke des Symbols keine Pixel sind.

ul.menu li.firefox a:hover {
　　　　background-position: 0　-50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0　-150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0　-250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0　-350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0　-450px;
}

Erledigt! Nach dem Kombinieren des gesamten Prozesses ist dies unser endgültiges HTML- und CSS-Code: