CSS Sprites kleines Beispielcode_Experience-Austausch

Dies ist eine sehr einfache Anwendung, aber im Design kann dies den Druck auf den Server verringern und die Anzahl der Anfragen verringern, was eine gute Methode ist.
Es ist zu beachten, dass selbst zwei Bilder auf einem so kleinen Bild nicht viel langsamer sind. Es gibt jedoch ein Problem, wenn sich zwei Bilder abwechseln Der Effekt stellt sich lange Zeit nicht ein. (Die Zeit variiert je nach Reaktionsgeschwindigkeit des Servers und Bildgröße)

Das Folgende ist der CSS-Teil:

body {
Schriftfamilie: „Lucida Sans“, „Lucida Sans Unicode ";
Schriftgröße: 14px;
Zeilenhöhe: 24px;
}
ul {
list-style-type: none;
}
li {
float: left;

}
a{
hintergrundbild: url(bg.gif);
hintergrundposition: 53px 0px;
Anzeige: Block
Breite: 53 Pixel;
Farbe: #333333; li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
text -decoration: none;
background-position: 0 0px;//Hier wird angegeben, dass die Anzeige von Bildern ab einer bestimmten Koordinate beginnen soll}


Das ist aus dem obigen Code nicht schwer zu erkennen dass dies eine entscheidende Rolle spielt Was ist

background-position:* *px;


Auf diese Weise können wir in komplexen CSS-Anwendungen das Problem des Nachladens von Hintergrundbildern lösen