“ sprite gambar ” adalah teknik di mana satu gambar besar dibuat yang terdiri dari beberapa gambar tunggal. Dan setiap bagian dari gambar besar dapat ditampilkan relatif terhadap persyaratan desain. Ini membantu pengembang untuk membangun elemen yang menarik secara visual dengan lancar. Sprite gambar dapat digunakan untuk ikon, tombol, dan elemen grafis lainnya. Artikel ini menunjukkan prosedur langkah demi langkah menggunakan sprite gambar di CSS.
Cara Menggunakan I penyihir Sprite di CSS?
Di CSS, pengembang menggunakan sprite gambar untuk meminimalkan/mengurangi waktu pemuatan halaman web. Ini membantu dalam mengurangi permintaan HTTP, memastikan pemuatan lebih cepat, dan meningkatkan faktor pengalaman pengguna. Misalnya, kunjungi contoh di bawah ini:
Contoh: Menggunakan Image Sprite di List Item
Dalam contoh ini, daftar terurut dibuat dan di setiap item daftar, bagian dari gambar sprite ditampilkan di layar.
Prasyarat:
Untuk mendapatkan gambar spesifik dari sprite gambar, dimensi sprite gambar yang digunakan sangat penting. Misalnya, gambar yang memiliki dimensi “ 937×156 ” ditunjukkan di bawah ini:
Ikuti langkah-langkah di bawah ini untuk menampilkan beberapa bagian dari gambar yang ditampilkan di atas:
Langkah 1: Pembuatan Item Daftar
Daftar unordered dibuat di halaman web, seperti yang terlihat pada cuplikan kode di bawah ini:
< ul >Kosong: < itu pengenal = 'kosong' > itu >
Setengah: < itu pengenal = 'setengah' > itu >
Penuh: < itu pengenal = 'penuh' > itu >
ul >
Deskripsi potongan kode di atas:
-
- Pertama, gunakan “
” tag. - Selanjutnya, tetapkan id ' kosong ”, “ setengah ' Dan ' penuh ” untuk tiga item daftar. Ini digunakan nanti untuk menampilkan bagian dari gambar yang lebih besar.
- Pertama, gunakan “
Langkah 2: Menampilkan Gambar Pertama
Untuk menampilkan hati yang kosong di halaman web yang merupakan gambar pertama di sprite gambar. Menggunakan ' kosong ” id dan masukkan kode berikut:
#kosong {lebar: 157px;
tinggi: 150px;
latar belakang: url ( .. / sprite.jpg ) 0 0 ;
}
Pada baris kode di atas:
-
- Pertama, atur “ lebar ' Dan ' tinggi ” dari gambar yang ingin ditampilkan pengembang di halaman web.
- Properti ini ditugaskan ke nilai “ 157px ' Dan ' 150px ” menurut contoh yang diberikan di atas, tetapi mungkin berbeda relatif terhadap gambar dengan dimensi berbeda.
- Selanjutnya, berikan jalur ' sprite ' gambar ke ' latar belakang ' Properti. Sekarang, atur arah “ 0 ' Dan ' 0 ” dan ini menampilkan bagian pertama dari sprite gambar.
Setelah eksekusi baris kode di atas, halaman web terlihat seperti ini:
Snapshot di atas menunjukkan bahwa gambar pertama dari sprite gambar ditampilkan di halaman web.
Langkah 3: Menampilkan Gambar Tengah dan Terakhir
Untuk menampilkan bagian gambar tengah dan terakhir dari sprite gambar, masukkan properti CSS berikut:
#setengah {lebar: 157px;
tinggi: 150px;
latar belakang: url ( .. / sprite.jpg ) -462px 0px
}
#penuh {
lebar: 157px;
tinggi: 150px;
latar belakang: url ( .. / sprite.jpg ) -770px 0px
}
Deskripsi potongan kode di atas:
-
- Pertama, pilih “ setengah ” id dan masukkan properti CSS yang sama yang digunakan pada langkah di atas.
- Untuk menampilkan gambar tengah dari sprite gambar, ubah arah atau tetapkan padding dari sisi kiri. Misalnya, arah dari kiri diatur ke “ negatif 462px ”.
- Dengan cara yang sama, tampilkan gambar terakhir dengan mengatur arah dari kiri ke “ -770px ”.
Setelah eksekusi properti CSS di atas, halaman web muncul seperti ini:
Snapshot di atas menunjukkan bahwa tiga gambar dari sprite gambar telah ditampilkan di halaman web.
Kesimpulan
“ sprite gambar ” adalah satu gambar besar yang terdiri dari beberapa gambar kecil seperti fitur kolase. Dan setiap bagian dari gambar besar yang mewakili gambar yang lebih kecil dapat ditampilkan. Sesuai dengan persyaratan menggunakan “ latar belakang ” properti yang disediakan oleh CSS. Untuk menampilkan gambar tertentu dari sprite gambar, atur dulu lebar dan tinggi gambar. Setelah itu, gunakan nilai arah untuk menampilkan hanya bagian gambar dari sprite gambar.