CSS-Bild-Sprites

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Bild-Sprites

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

Das Laden und Generieren einer Webseite mit vielen Bildern kann lange dauern mehrere Serveranfragen.

Durch die Verwendung von Bild-Sprites wird die Anzahl der Serveranfragen und der Speicherbedarf reduziert Bandbreite.

Bild-Sprites - einfaches Beispiel

Anstatt drei separate Bilder zu verwenden, verwenden wir dieses einzelne Bild („img_navsprites.gif“):

Mit CSS können wir nur den Teil des Bildes anzeigen, den wir benötigen.

Im folgenden Beispiel gibt das CSS an, welcher Teil der „img_navsprites.gif“ Bild zum Anzeigen:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Beispiel erklärt:

<img id="home" src="img_trans.gif">

- Definiert nur ein kleines transparentes Bild, da das src-Attribut nicht leer sein darf. Das angezeigte Bild ist das Hintergrundbild, das wir in CSS angeben

width: 46px; height: 44px;

- Definiert den Teil des Bildes, den wir verwenden möchten

background: url(img_navsprites.gif) 0 0;

- Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)

Dies ist die einfachste Möglichkeit, Bild-Sprites zu verwenden. Jetzt möchten wir sie durch die Verwendung von Links und Hover-Effekten erweitern.

Bild-Sprites - Erstellen Sie eine Navigationsliste

Wir möchten das Sprite-Bild („img_navsprites.gif“) verwenden, um eine Navigationsliste zu erstellen.

Wir werden eine HTML-Liste verwenden, da diese ein Link sein kann und auch ein Hintergrundbild unterstützt:

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;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Beispiel erklärt:

#navlist {position:relative;}

- Position ist auf relativ gesetzt, um eine absolute Positionierung darin zu ermöglichen

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

- Rand und Abstand werden auf 0 gesetzt, der Listenstil wird entfernt und alle Listenelemente werden absolut positioniert

#navlist li, #navlist a {height:44px;display:block;}

- Die Höhe aller Bilder beträgt 44 Pixel

Beginnen Sie nun mit der Positionierung und dem Stil jedes einzelnen Teils:

#home {left:0px;width:46px;}

- Ganz links positioniert und die Breite des Bildes beträgt 46 Pixel

#home {background:url(img_navsprites.gif) 0 0;}

- Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)

#prev {left:63px;width:43px;}

- 63 Pixel nach rechts positioniert (#home-Breite 46 Pixel + etwas zusätzlicher Abstand zwischen den Elementen), und die Breite beträgt 43 Pixel

#prev {background:url('img_navsprites.gif') -47px 0;}

- Definiert das Hintergrundbild 47px nach rechts (#home Breite 46px + 1px Linie Teiler)

#next {left:129px;width:43px;}

- 129 Pixel nach rechts positioniert (Anfang von #prev ist 63 Pixel + Breite von #prev 43 Pixel + zusätzlicher Platz) und die Breite beträgt 43 Pixel

#next {background:url('img_navsprites.gif') -91px 0;}

- Definiert das Hintergrundbild 91px nach rechts (#home Breite 46px + 1px Zeilenteiler + #prev width 43px + 1px Zeilenteiler)

Bild-Sprites - Hover-Effekt

Jetzt möchten wir unserer Navigationsliste einen Hover-Effekt hinzufügen.

Tipp: Der Selektor :hover kann für alle Elemente verwendet werden. nicht nur auf Links.

Unser neues Bild („img_navsprites_hover.gif“) enthält drei Navigationsbilder und drei Bilder zur Verwendung für Hover-Effekte:

Da es sich um ein einzelnes Bild und nicht um sechs separate Dateien handelt, gibt es nein Ladeverzögerung, wenn ein Benutzer mit der Maus über das Bild fährt.

Wir fügen nur drei Codezeilen hinzu, um den Hover-Effekt hinzuzufügen:

Beispiel

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px 
-45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px 
-45px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Beispiel erklärt:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- Für alle drei Hoverbilder geben wir die gleiche Hintergrundposition an, nur 45px weiter unten