1. Konzentrieren Sie alle an der Seite beteiligten verstreuten Hintergrundbilder zu einem großen Bild und verwenden Sie dann das große Bild für die Webseite. Wenn ein Benutzer auf eine Seite zugreift, muss er nur einmal eine Anfrage an den Server senden.
2. Verwenden Sie Attribute wie die Hintergrundposition direkt, um den erforderlichen Hintergrundteil genau zu lokalisieren.
Beispiel
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</head>
<Körper>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
<Stil>
.box span {
Anzeige: Inline-Block;
}
.J {
Hintergrund: url("abcd.jpg") no-repeat -389px -141px;
Breite: 102px;
Höhe: 112px;
}
.w {
Hintergrund: url("abcd.jpg") no-repeat -117px -560px;
Breite: 135px;
Höhe: 112px;
}
.T {
Hintergrund: url("abcd.jpg") no-repeat -368px -417px;
Breite: 102px;
Höhe: 112px;
}
</style>
</html>Das Obige ist eine Einführung in die CSS-Sprite-Technologie. Ich hoffe, es wird für alle hilfreich sein.