Gambar Sprite

CSS Gambar Sprite
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
gambar Sprite

Sebuah sprite gambar koleksi gambar dimasukkan ke dalam satu gambar.

Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan beberapa permintaan server.

Menggunakan gambar sprite akan mengurangi jumlah permintaan server dan menghemat bandwidth.
Gambar Sprite - Wikipedia Contoh

Alih-alih menggunakan tiga gambar terpisah, kami menggunakan gambar ini tunggal ("img_navsprites.gif"):

gambar navigasi

Dengan CSS, kita dapat menunjukkan hanya bagian dari gambar yang kita butuhkan.

Pada contoh berikut CSS menentukan bagian mana dari "img_navsprites.gif" gambar untuk menunjukkan:
contoh
#home {
     width: 46px;
     height: 44px;
     background: url (img_navsprites.gif) 0 0;
}

Cobalah sendiri »

Contoh menjelaskan:

     <img id = "rumah" src = "img_trans.gif"> - Hanya mendefinisikan gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi gambar latar belakang kita tentukan di CSS
     width: 46px; height: 44px; - Mendefinisikan bagian dari gambar yang ingin kita gunakan
     background: url (img_navsprites.gif) 0 0; - Menentukan gambar latar belakang dan posisinya (0px kiri, atas 0px)

Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita ingin memperluas dengan menggunakan link dan membawa efek.
Gambar Sprite - Buat Daftar Navigasi

Kami ingin menggunakan gambar sprite ("img_navsprites.gif") untuk membuat daftar navigasi.

Kami akan menggunakan daftar HTML, karena dapat link dan juga mendukung gambar latar belakang:
contoh
#navlist {
     position: relative;
}

#navlist li {
     margin: 0;
     padding: 0;
     list-style: none;
     position: absolute;
     top: 0;
}

#navlist li, #navlist sebuah {
     height: 44px;
     display: block;
}

#home {
     kiri: 0px;
     width: 46px;
     background: url ('img_navsprites.gif') 0 0;
}

#prev {
     kiri: 63px;
     width: 43px;
     background: url ('img_navsprites.gif') -47px 0;
}

#next {
     kiri: 129px;
     width: 43px;
     background: url ('img_navsprites.gif') -91px 0;
}

Cobalah sendiri »

Contoh menjelaskan:

     #navlist {position: relative;} - posisi diatur untuk relatif untuk memungkinkan posisi mutlak di dalamnya
     #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin dan padding diatur ke 0, list-style dihapus, dan semua item daftar yang mutlak diposisikan
     #navlist li, #navlist a {height: 44px; display: block;} - ketinggian semua gambar yang 44px

Sekarang mulai posisi dan gaya untuk setiap bagian tertentu:

     #home {kiri: 0px; width: 46px;} - Diposisikan semua jalan ke kiri, dan lebar gambar adalah 46px
     #home {background: url (img_navsprites.gif) 0 0;} - Menentukan gambar latar belakang dan posisinya (0px kiri, atas 0px)
     #prev {kiri: 63px; width: 43px;} - Diposisikan 63px ke kanan (#home lebar 46px + beberapa ruang ekstra antara item), dan lebarnya adalah 43px.
     #prev {background: url ('img_navsprites.gif') -47px 0;} - Menentukan 47px gambar latar belakang ke kanan (#home lebar 46px + 1px baris pembagi)
     #next {kiri: 129px; width: 43px;} - Diposisikan 129px ke kanan (awal #prev adalah 63px + lebar #prev 43px + ruang tambahan), dan lebarnya adalah 43px.
     #next {background: url ('img_navsprites.gif') -91px 0;} - Menentukan 91px gambar latar belakang ke kanan (#home lebar 46px + 1px garis pembagi + lebar #prev 43px + 1px baris pembagi)

Gambar Sprite - Hover Efek

Sekarang kita ingin menambahkan efek hover ke daftar navigasi kami.
Catatan: hover pemilih digunakan untuk memilih elemen ketika Anda mengarahkan mouse atas mereka.

Tip: The: hover pemilih dapat digunakan pada semua elemen, tidak hanya pada link.

Image baru kami ("img_navsprites_hover.gif") berisi tiga gambar navigasi dan tiga gambar yang akan digunakan untuk efek melayang-layang:

gambar navigasi

Karena ini adalah salah satu gambar tunggal, dan tidak enam file terpisah, tidak akan ada penundaan pemuatan ketika pengguna melayang di atas gambar.

Kami hanya menambahkan tiga baris kode untuk menambahkan efek hover:
contoh
#home a: hover {
     background: url ('img_navsprites_hover.gif') 0 -45px;
}

#prev a: hover {
     background: url ('img_navsprites_hover.gif') -47px -45px;
}

#next a: hover {
     background: url ('img_navsprites_hover.gif') -91px -45px;
}