CSS -Bild-Sprites
Bild Sprites
Ein Bild-Sprite ist eine Sammlung von Bildern, die in einem einzigen Bild zusammengefasst sind.
Das Laden einer Webseite mit vielen Bildern kann lange dauern und generiert mehrere Serveranfragen.
Die Verwendung von Bild-Sprites reduziert die Anzahl der Serveranfragen und spart 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 brauchen.
Im folgenden Beispiel gibt das CSS an, welcher Teil des Bildes „img_navsprites.gif“ angezeigt werden soll:
Beispiel
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
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 angebenwidth: 46px; height: 44px;- Definiert den Teil des Bildes, den wir verwenden möchtenbackground: url(img_navsprites.gif) 0 0;- Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)
Dies ist die einfachste Art, Bild-Sprites zu verwenden, jetzt wollen wir es erweitern, indem wir Links und Hover-Effekte verwenden.
Image 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 sie 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;
}
Beispiel erklärt:
- #navlist {position:relative;} - position wird auf relativ gesetzt, um eine absolute Positionierung darin zu ermöglichen
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin und padding werden auf 0 gesetzt, list-style wird entfernt und alle Listenelemente werden absolut positioniert
- #navlist li, #navlist a {height:44px;display:block;} - die Höhe aller Bilder beträgt 44px
Beginnen Sie nun damit, die einzelnen Teile zu positionieren und zu stylen:
- #home {left:0px;width:46px;} – Ganz links positioniert, und die Breite des Bildes beträgt 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)
- #prev {left:63px;width:43px;} – Positioniert 63px rechts (#home Breite 46px + etwas zusätzlicher Abstand zwischen Elementen), und die Breite beträgt 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Definiert das Hintergrundbild 47px nach rechts (#home width 46px + 1px line divider)
- #next {left:129px;width:43px;}- Positioniert 129px rechts (Start von #prev ist 63px + #prev Breite 43px + zusätzliches Leerzeichen) und die Breite ist 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Definiert das Hintergrundbild 91px rechts (#home Breite 46px + 1px Zeilentrenner + #prev Breite 43px + 1px Zeilentrenner )
Bild Sprites - Hover-Effekt
Jetzt wollen wir unserer Navigationsliste einen Hover-Effekt hinzufügen.
Tipp: Der :hoverSelektor kann auf alle Elemente angewendet 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 keine 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;
}
Beispiel erklärt:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Für alle drei Hover-Bilder geben wir die gleiche Hintergrundposition an, nur 45px weiter unten