CSS-Bildspritze

Bilder-Sprite

Ein Bild-Sprite ist eine Sammlung von Bildern, die in einem einzigen Bild enthalten sind.

Webseiten, die viele Bilder enthalten, können lange Zeit zum Laden benötigen und mehrere Serveranfragen erzeugen.

Die Verwendung von Bild-Sprites reduziert die Anzahl der Serveranfragen und spart Bandbreite.

Bilder-Sprite - Einfaches Beispiel

Wir verwenden das folgende einzelne Bild ("navsprites.gif") anstatt drei separate Bilder zu verwenden:

Navigationsbild

Durch die Verwendung von CSS können wir nur einen bestimmten Teil des Bildes anzeigen.

Im folgenden Beispiel legt das CSS fest, welche Teil des "navsprites.gif"-Bildes angezeigt wird:

Beispiel

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Try It Yourself

Example Explanation:

  • <img id="home" src="trans.gif"> - Definieren Sie nur eine kleine transparente Bild, da das src-Attribut nicht leer sein kann. Das tatsächliche angezeigte Bild wird das in der CSS指定的 Hintergrundbild sein.
  • width: 46px; height: 44px; - Definieren Sie den Teil des Bildes, den wir verwenden möchten
  • background: url(navsprites.gif) 0 0; - Definieren Sie das Hintergrundbild und seine Position (links 0px, oben 0px)

Bilder-Sprite - Erstellen einer Navigationsliste

Wir möchten die Sprite-Bilder ("navsprites.gif") verwenden, um eine Navigationsliste zu erstellen.

Wir verwenden HTML-Listen, da sie sowohl Links als auch Hintergrundbilder unterstützen können:

Beispiel

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Try It Yourself

Example Explanation:

  • #navlist {position:relative;} - Die Position wird auf relativ gesetzt, um absolute Positionierungen darin zu ermöglichen
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Außenabstand und Innengröße auf 0 gesetzt, list-style entfernt und alle Listeinträge sind absolut positioniert
  • #navlist li, #navlist a {height:44px;display:block;} - Alle Bilder haben eine Höhe von 44px

Jetzt beginnen wir damit, Position und Stil für jeden spezifischen Abschnitt zu setzen:

  • #home {left:0px;width:46px;} - Positioniert immer nach links, Bildbreite 46px
  • #home {background:url(navsprites.gif) 0 0;} - Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)
  • #prev {left:63px;width:43px;} - Positioniert nach rechts 63px (#home Breite 46px + zusätzlicher Raum zwischen den Elementen), Breite 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Definiert das Hintergrundbild nach rechts 47px (#home Breite 46px + 1px Trennlinie)
  • #next {left:129px;width:43px;} - Positioniert nach rechts 129px (#prev Start ist 63px + #prev Breite ist 43px + zusätzliche Leerzeichen), Breite 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Definiert das Hintergrundbild nach rechts 91px (#home Breite 46px + 1px Trennlinie + #prev Breite 43px + 1px Trennlinie)

Image Sprite - Hover-Effekt

Jetzt fügen wir den Hover-Effekt zur Navigationsliste hinzu.

Tipp::hover-Selektor ist für alle Elemente gültig und nicht nur für Links.

Unser neues Bild ("navsprites_hover.gif") enthält drei Navigationsbilder und drei Bilder für den Hover-Effekt:

Navigationsbild

Weil dies ein Bild ist und nicht sechs einzelne Dateien, so wenn der Benutzer den Mauszeiger auf das Bild bewegt:Es gibt keine Ladeverzögerung.

Wir fügen nur drei Zeilen Code hinzu, um den Hover-Effekt zu erreichen:

Beispiel

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Try It Yourself

Example Explanation:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - We specify the same background position for all three hover images, just 45 pixels down