Bild Sprites
Ein Bild Sprite ist eine Sammlung von Bildern zu einem einzigen Bild setzen.
Eine Web-Seite mit vielen Bildern kann sehr lange dauern und mehrere Server-Anfragen generiert zu laden.
Mit Bild-Sprites wird die Anzahl der Server-Anfragen zu reduzieren und Bandbreite zu sparen.
Bild Sprites - Einfaches Beispiel
Statt drei separate Bilder zu verwenden, nutzen wir diese Einzelbild ("img_navsprites.gif") :
Mit CSS können wir nur den Teil des Bildes zeigen, was wir brauchen.
Im folgenden Beispiel gibt die CSS , welcher Teil des "img_navsprites.gif" Bild zeigen:
Beispiel
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} Versuch es selber " Erklärt Beispiel:
-
<img id="home" src="img_trans.gif">- definiert nur ein kleines transparentes Bild , weil das Attribut src nicht leer sein. Das angezeigte Bild wird das Hintergrundbild wir in CSS angeben -
width: 46px; height: 44px;width: 46px; height: 44px;- Definiert den Teil des Bildes , wir verwenden möchten -
background: url(img_navsprites.gif) 0 0;- Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)
Dies ist der einfachste Weg, Bild-Sprites verwenden, jetzt wollen wir es erweitern, indem sie Links und schweben Effekten.
Bild Sprites - Erstellen einer Navigationsliste
Wir wollen das Sprite Bild zu verwenden ("img_navsprites.gif") eine Navigationsliste zu erstellen.
Wir werden eine HTML-Liste verwenden, da es sich um eine Verbindung sein kann und unterstützt auch ein Hintergrundbild:
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;
}
Versuch es selber " Erklärt Beispiel:
- #navlist {position:relative;} - Position ist relativ gesetzt Inneren absolute Positionierung zu ermöglichen ,
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin und padding auf 0 gesetzt ist, list-style entfernt wird, und alle Listenelemente sind absolut positionierter
- #navlist li, #navlist a {height:44px;display:block;} - die Höhe aller Bilder sind 44px
Nun zu Position und Stil beginnen für jeden spezifischen Teil:
- #home {left:0px;width:46px;} - Positioniert den ganzen Weg nach links, und die Breite des Bildes ist 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Legt das Hintergrundbild und seine Position (links 0px, oben 0px)
- #prev {left:63px;width:43px;} - Positioniert 63px nach rechts (#Home Breite 46px + etwas mehr Abstand zwischen den Elementen), und die Breite ist 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Legt das Hintergrundbild 47px nach rechts (#Home Breite 46px + 1px Linie Teiler)
- #next {left:129px;width:43px;} - Positioniert 129px nach rechts (Beginn des #prev ist 63px + #prev Breite 43px + extra Raum), und die Breite ist 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Legt das Hintergrundbild 91px nach rechts (#Home Breite 46px + 1px Linie Teiler + #prev Breite 43px + 1px Linie Teiler)
Bild Sprites - Hover-Effekt
Jetzt wollen wir einen Hover-Effekt auf unsere Navigationsliste hinzuzufügen.
 | Tipp: Der :hover - Wähler können auf alle Elemente verwendet werden, nicht nur auf Links. |
|---|
Unser neues Bild ("img_navsprites_hover.gif") enthält drei Navigations Bilder und drei Bilder für Hover - Effekte zu nutzen:
Da dies ein einziges Bild ist, und nicht mehr als sechs separaten Dateien, wird eskeine Belastung Verzögerung, wenn ein Benutzer auf das Bild schwebt.
Wir fügen nur drei Zeilen Code 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;
} Versuch es selber " Erklärt Beispiel:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Für alle drei Hover - Bilder , die wir den gleichen Hintergrund Position angeben, 45px nur weiter nach unten