' sprite imej ” ialah teknik di mana satu imej besar dicipta yang terdiri daripada berbilang imej tunggal. Dan mana-mana bahagian imej besar boleh dipaparkan secara relatif kepada keperluan reka bentuk. Ia membantu pembangun membina elemen yang menarik secara visual dengan lancar. Sprite imej boleh digunakan untuk ikon, butang dan elemen grafik lain. Artikel ini menunjukkan prosedur langkah demi langkah menggunakan sprite imej dalam CSS.
Cara Penggunaan I Mage Sprite dalam CSS?
Dalam CSS, pembangun menggunakan sprite imej untuk meminimumkan/mengurangkan masa memuatkan halaman web. Ia membantu dalam mengurangkan permintaan HTTP, memastikan pemuatan lebih cepat dan meningkatkan faktor pengalaman pengguna. Sebagai contoh, lawati contoh di bawah:
Contoh: Menggunakan Image Sprite dalam Item Senarai
Dalam contoh ini, senarai tersusun dibuat dan dalam setiap item senarai, sebahagian daripada imej sprite dipaparkan pada skrin.
Prasyarat:
Untuk mendapatkan imej khusus daripada sprite imej, dimensi sprite imej yang sedang digunakan adalah amat penting. Sebagai contoh, imej yang mempunyai dimensi ' 937×156 ” ditunjukkan di bawah:
Ikuti langkah di bawah untuk memaparkan sebahagian daripada imej yang dipaparkan di atas:
Langkah 1: Penciptaan Item Senarai
Senarai tidak tersusun dijana pada halaman web, seperti yang dilihat dalam coretan kod di bawah:
< ul >kosong: < itu ID = 'kosong' > itu >
Separuh: < itu ID = 'separuh' > itu >
penuh: < itu ID = 'penuh' > itu >
ul >
Perihalan coretan kod di atas:
-
- Pertama, gunakan '
” tag. - Seterusnya, tetapkan id bagi “ kosong ”, “ separuh ” dan “ penuh ” untuk tiga item senarai. Ini digunakan kemudian untuk memaparkan sebahagian daripada imej yang lebih besar.
- Pertama, gunakan '
Langkah 2: Memaparkan Imej Pertama
Untuk memaparkan hati kosong pada halaman web yang merupakan imej pertama dalam sprite imej. Menggunakan ' kosong ” id dan masukkan kod berikut:
#kosong {lebar: 157px;
ketinggian: 150px;
latar belakang: url ( .. / sprite.jpg ) 0 0 ;
}
Dalam baris kod di atas:
-
- Mula-mula, tetapkan ' lebar ” dan “ ketinggian ” imej yang ingin dipaparkan oleh pembangun pada halaman web.
- Sifat ini diberikan kepada nilai ' 157px ” dan “ 150px ” mengikut contoh yang diberikan di atas, tetapi ia mungkin berbeza berbanding imej dengan dimensi berbeza.
- Seterusnya, sediakan laluan ' sprite ” imej ke “ latar belakang ” harta benda. Sekarang, tetapkan arah ' 0 ” dan “ 0 ” dan ia memaparkan bahagian pertama sprite imej.
Selepas pelaksanaan baris kod di atas, halaman web kelihatan seperti ini:
Gambar di atas menunjukkan bahawa imej pertama daripada sprite imej dipaparkan pada halaman web.
Langkah 3: Memaparkan Imej Tengah dan Terakhir
Untuk memaparkan bahagian imej tengah dan terakhir daripada sprite imej, masukkan sifat CSS berikut:
#separuh {lebar: 157px;
ketinggian: 150px;
latar belakang: url ( .. / sprite.jpg ) -462px 0px
}
#penuh {
lebar: 157px;
ketinggian: 150px;
latar belakang: url ( .. / sprite.jpg ) -770px 0px
}
Perihalan coretan kod di atas:
-
- Pertama, pilih ' separuh ” id dan masukkan sifat CSS yang sama yang digunakan dalam langkah di atas.
- Untuk memaparkan imej tengah daripada sprite imej, tukar arah atau tetapkan padding dari sebelah kiri. Sebagai contoh, arah dari kiri ditetapkan kepada “ 462px negatif ”.
- Dengan cara yang sama, paparkan imej terakhir dengan menetapkan arah dari kiri ke “ -770px ”.
Selepas pelaksanaan sifat CSS di atas, halaman web kelihatan seperti ini:
Gambar di atas menunjukkan bahawa tiga imej daripada sprite imej telah dipaparkan pada halaman web.
Kesimpulan
' sprite imej ” ialah satu imej besar yang terdiri daripada berbilang imej yang lebih kecil sama seperti ciri kolaj. Dan mana-mana bahagian imej besar yang mewakili imej yang lebih kecil boleh dipaparkan. Mengikut keperluan menggunakan ' latar belakang ” harta yang disediakan oleh CSS. Untuk memaparkan imej tertentu daripada sprite imej, mula-mula tetapkan lebar dan ketinggian imej. Selepas itu, gunakan nilai arah untuk memaparkan hanya bahagian imej daripada sprite imej.