CSS
CSS Image Sprites

Syntax

• // Hintergrundposition verwenden
  Hintergrund: URL ("Sprite-Image.png");
  Hintergrundposition: -20px 50px;
• // Abkürzung für Hintergrundeigenschaften
  Hintergrund: URL ("sprite-image.png") -20px 50px;

Bemerkungen

Eine grundlegende Implementierung

Was ist ein Image-Sprite?

Ein Image-Sprite ist ein einzelnes Asset, das sich in einem Image-Sprite-Blatt befindet. Ein Image-Sprite-Sheet ist eine Image-Datei, die mehrere Assets enthält, die daraus extrahiert werden können.

Zum Beispiel:

Das Bild oben ist ein Bildsprite-Blatt, und jeder dieser Sterne ist ein Sprite innerhalb des Sprite-Blattes. Diese Sprite-Sheets sind hilfreich, da sie die Leistung verbessern, indem sie die Anzahl der HTTP-Anforderungen reduzieren, die ein Browser möglicherweise stellen muss.

Wie implementierst du eine? Hier ist ein Beispielcode.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

Durch Festlegen der Breite und Höhe des Sprites und der Eigenschaft background-position in CSS (mit einem x- und y-Wert) können Sie Sprites mithilfe von CSS auf einfache Weise aus einem Sprite-Sheet extrahieren.