1. Pusatkan semua gambar latar belakang yang tersebar di halaman menjadi gambar besar, lalu gunakan gambar besar tersebut untuk halaman web. Saat pengguna mengakses suatu halaman, mereka hanya perlu mengirimkan permintaan ke server satu kali.
2. Gunakan langsung atribut seperti background-position untuk menemukan lokasi bagian latar belakang yang diperlukan secara akurat.
Contoh
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<judul>Judul</judul>
</kepala>
<tubuh>
<div>
<span></span>
<span></span>
<span></span>
</div>
</tubuh>
<gaya>
.rentang kotak {
tampilan: blok sebaris;
}
.J {
latar belakang: url("abcd.jpg") tanpa pengulangan -389px -141px;
lebar: 102 piksel;
tinggi: 112 piksel;
}
.w {
latar belakang: url("abcd.jpg") tanpa pengulangan -117px -560px;
lebar: 135 piksel;
tinggi: 112 piksel;
}
.T {
latar belakang: url("abcd.jpg") tanpa pengulangan -368px -417px;
lebar: 102 piksel;
tinggi: 112 piksel;
}
</gaya>
</html>Di atas adalah pengenalan teknologi sprite CSS, semoga bermanfaat bagi semua orang.