Der ' Bild-Sprites „ist eine Technik, bei der ein großes Bild erstellt wird, das aus mehreren Einzelbildern besteht. Und jeder Teil des großen Bildes kann entsprechend den Designanforderungen angezeigt werden. Es hilft Entwicklern, optisch ansprechende Elemente reibungslos zu erstellen. Bild-Sprites können für Symbole, Schaltflächen und andere grafische Elemente verwendet werden. Dieser Artikel zeigt Schritt für Schritt die Vorgehensweise zur Verwendung von Bild-Sprites in CSS.
So verwenden Sie I Magier-Sprites in CSS?
In CSS nutzen die Entwickler Bild-Sprites, um die Ladezeit einer Webseite zu minimieren/verkürzen. Es trägt dazu bei, HTTP-Anfragen zu reduzieren, sorgt für schnelleres Laden und verbessert den Benutzererfahrungsfaktor. Sehen Sie sich zum Beispiel das folgende Beispiel an:
Beispiel: Verwendung von Image Sprite im Listenelement
In diesem Beispiel wird eine geordnete Liste erstellt und in jedem Listenelement wird ein Teil des Sprite-Bildes auf dem Bildschirm angezeigt.
Voraussetzung:
Um das spezifische Bild aus dem Bild-Sprite zu erhalten, sind die Abmessungen des verwendeten Bild-Sprites besonders wichtig. Zum Beispiel das Bild mit der Dimension „ 937×156 ” wird unten angezeigt:
Führen Sie die folgenden Schritte aus, um einen Teil des oben angezeigten Bildes anzuzeigen:
Schritt 1: Erstellung von Listenelementen
Die ungeordnete Liste wird auf der Webseite generiert, wie im folgenden Codeausschnitt zu sehen ist:
< ul >Leer: < Das Ausweis = 'leer' > Das >
Halb: < Das Ausweis = 'Hälfte' > Das >
Voll: < Das Ausweis = 'voll' > Das >
ul >
Die Beschreibung des obigen Codeausschnitts:
-
- Verwenden Sie zunächst die „
' Schild. - Als nächstes weisen Sie die IDs von „ leer “, „ Hälfte ' Und ' voll ” für drei Listenelemente. Diese werden später verwendet, um einen Teil des größeren Bildes anzuzeigen.
- Verwenden Sie zunächst die „
Schritt 2: Anzeigen des ersten Bildes
Um das leere Herz auf der Webseite anzuzeigen, das das erste Bild im Bild-Sprite ist. Benutzen Sie die „ leer ” id und fügen Sie den folgenden Code ein:
#leer {Breite: 157px;
Höhe: 150px;
Hintergrund: URL ( .. / sprite.jpg ) 0 0 ;
}
In der obigen Codezeile:
-
- Stellen Sie zunächst „ Breite ' Und ' Höhe ” des Bildes, das der Entwickler auf der Webseite anzeigen möchte.
- Diese Eigenschaften werden den Werten von „ 157px ' Und ' 150px ” gemäß dem oben bereitgestellten Beispiel, sie können jedoch im Verhältnis zu den Bildern mit unterschiedlichen Abmessungen variieren.
- Geben Sie als Nächstes den Pfad des „ Sprite ” Bild zum „ Hintergrund ' Eigentum. Stellen Sie nun die Richtung von „ 0 ' Und ' 0 ” und es zeigt den ersten Teil des Bild-Sprites an.
Nach der Ausführung der obigen Codezeile sieht die Webseite folgendermaßen aus:
Der obige Schnappschuss zeigt, dass das erste Bild des Bild-Sprites auf der Webseite angezeigt wird.
Schritt 3: Anzeigen des mittleren und letzten Bildes
Um den mittleren und letzten Bildteil des Bild-Sprites anzuzeigen, fügen Sie die folgenden CSS-Eigenschaften ein:
#Hälfte {Breite: 157px;
Höhe: 150px;
Hintergrund: URL ( .. / sprite.jpg ) -462px 0px
}
#voll {
Breite: 157px;
Höhe: 150px;
Hintergrund: URL ( .. / sprite.jpg ) -770px 0px
}
Die Beschreibung des obigen Codeausschnitts:
-
- Wählen Sie zunächst „ Hälfte ” id und fügen Sie dieselben CSS-Eigenschaften ein, die im obigen Schritt verwendet wurden.
- Um das mittlere Bild des Bild-Sprites anzuzeigen, ändern Sie die Richtung oder weisen Sie einen Abstand von der linken Seite zu. Beispielsweise ist die Richtung von links auf „ negativ 462px “.
- Zeigen Sie auf die gleiche Weise das letzte Bild an, indem Sie die Richtung von links auf „ -770px “.
Nach der Ausführung der oben genannten CSS-Eigenschaften sieht die Webseite folgendermaßen aus:
Der obige Schnappschuss zeigt, dass die drei Bilder des Bild-Sprites auf der Webseite angezeigt wurden.
Abschluss
Der ' Bild-Sprites „ist ein einzelnes großes Bild, das wie die Collagenfunktion aus mehreren kleineren Bildern besteht. Und jeder Teil des großen Bildes, der ein kleineres Bild darstellt, kann angezeigt werden. Gemäß den Anforderungen unter Verwendung der „ Hintergrund ” von CSS bereitgestellte Eigenschaft. Um das spezifische Bild aus dem Bild-Sprite anzuzeigen, legen Sie zunächst die Breite und Höhe des Bildes fest. Anschließend verwenden Sie die Richtungswerte, um nur den Teil des Bildes aus dem Bild-Sprite anzuzeigen.