tutorial pengembangan web terbaru
 

CSS Sprite gambar

❮ Sebelumnya Bab selanjutnya ❯

Sprite gambar

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 permintaan beberapa server yang.

Menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth.

Sprite Gambar - 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="home" 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 dalam CSS
  • width: 46px; height: 44px; width: 46px; height: 44px; - Mendefinisikan bagian dari gambar yang ingin kita gunakan
  • background: url(img_navsprites.gif) 0 0; - Mendefinisikan gambar latar belakang dan posisinya (kiri 0px, atas 0px)

Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita ingin memperluas dengan menggunakan link dan efek hover.

Sprite Gambar - Buat Daftar Navigasi

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

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 a {
    height: 44px;
    display: block;
}

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

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

#next {
    left: 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 {left: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 (kiri 0px, atas 0px)
  • #prev {left:63px;width:43px;} - Diposisikan 63px ke kanan (#home lebar 46px + beberapa ruang tambahan 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 divider)
  • #next {left:129px;width:43px;} - Diposisikan 129px ke kanan (awal #prev adalah 63px + lebar #prev 43px + ruang ekstra), dan lebarnya adalah 43px.
  • #next {background:url('img_navsprites.gif') -91px 0;} - Menentukan 91px gambar latar belakang ke kanan (#home lebar 46px + 1px garis pembatas + lebar #prev 43px + 1px baris divider)

Gambar Sprite - Hover Effect

Sekarang kita ingin menambahkan efek hover ke daftar navigasi kami.

Catatan 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:

gambar navigasi

Karena ini adalah salah satu gambar tunggal, dan tidak enam file terpisah, tidak akanada beban delay 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;
}
Cobalah sendiri "

Contoh menjelaskan:

  • #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Untuk ketiga gambar melayang kita tentukan posisi latar belakang yang sama, hanya 45px lebih bawah

❮ Sebelumnya Bab selanjutnya ❯