css Sprites contoh kecil kod_Pertukaran pengalaman

Ini adalah aplikasi yang sangat mudah, tetapi dalam reka bentuk, ini boleh mengurangkan tekanan pada pelayan dan mengurangkan bilangan permintaan, yang merupakan kaedah yang baik.
Perlu diingat bahawa walaupun dua gambar pada gambar sekecil itu tidak jauh lebih perlahan dari segi masa tindak balas Namun, terdapat masalah apabila dua gambar berselang-seli, ia adalah mudah untuk gambar latar belakang kesan tidak muncul untuk masa yang lama. (Masa berbeza-beza bergantung pada kelajuan tindak balas pelayan dan saiz imej)

Berikut ialah bahagian css:

badan {
font-family: "Lucida Sans", "Lucida Sans Unikod ";
saiz fon: 14px;
ketinggian baris: 24px;
}
ul {
jenis gaya senarai: tiada;
}
li {
apungan: kiri;

}
a{
imej latar belakang: url(bg.gif> tinggi: 26px
kedudukan latar belakang: 53px 0px;
paparan: blok;
margin-kanan: 10px;
lebar: 53px;
warna di tengah; li a:pautan {
hiasan teks: tiada;
}
li a:dilawati {
hiasan teks:
}
li a:layangkan {
text -decoration: none;
background-position: 0 0px;//Ia dinyatakan di sini untuk mula memaparkan imej daripada koordinat tertentu}


Ia tidak sukar untuk dilihat daripada kod di atas bahawa ini memainkan peranan yang menentukan Apakah

kedudukan latar belakang:* *px;


Dengan cara ini, dalam aplikasi css yang kompleks, kita boleh menyelesaikan masalah memuat semula imej latar belakang