CSS teknologi gambar mosaik
image Berpisah
Meratakan gambar adalah koleksi gambar individu.
Ada banyak gambar pada halaman mungkin memakan waktu lama untuk memuat dan menghasilkan permintaan beberapa server yang.
Menggunakan server perpecahan gambar akan mengurangi jumlah permintaan dan menghemat bandwidth.
image Split - contoh sederhana
Alih-alih menggunakan tiga gambar terpisah, seperti yang kita gunakan gambar ini tunggal ( "img_navsprites.gif"):
Dengan CSS, kita dapat menunjukkan hanya bagian dari gambar yang kita butuhkan.
Pada contoh di bawah ini menunjukkan sebagian dari CSS yang ditentukan "img_navsprites.gif" gambar:
contoh analisis:
- <Class Img = "home" src = "img_trans.gif" /> - karena mereka tidak boleh kosong, atribut src mendefinisikan hanya gambar transparan kecil. Gambar yang ditampilkan akan kita tentukan dalam gambar latar belakang CSS
- Width: 46px; height: 44px; - didefinisikan bagian dari gambar yang kita gunakan
- background: url (img_navsprites.gif) 0 0; - gambar latar belakang kustom dan posisinya (0px kiri, atas 0px)
Hal ini dilakukan dengan menggunakan gambar membagi cara termudah, dan sekarang kami menggunakan link dan efek hover.
Meratakan gambar - untuk membuat daftar menu
Kami ingin menggunakan gambar split ( "img_navsprites.gif"), untuk membuat daftar menu.
Kami akan menggunakan daftar HTML, karena dapat dihubungkan, dan juga mendukung gambar latar belakang:
contoh
#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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
Coba »
contoh analisis:
- #navlist {position: relative;} - posisi diatur posisi relatif, memungkinkan posisi mutlak dalam
- #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin dan padding diatur ke 0, daftar gaya dihapus, semua item daftar yang posisi mutlak
- #navlist li, #navlist sebuah {height: 44px; display: block;} - ketinggian semua gambar adalah 44px
Sekarang setiap bagian posisi dan gaya yang spesifik:
- #home {left: 0px; width: 46px;} - posisi ke kiri, dan cara lebar gambar adalah 46px
- #home {background: url (img_navsprites.gif) 0 0;} - gambar latar belakang kustom dan posisinya (kiri 0px, atas 0px)
- #prev {kiri: 63px; width: 43px;} - pada posisi 63px kanan (#home lebar 46px + beberapa ruang tambahan antara item), lebar 43px.
- #prev {background: url ( 'img_navsprites.gif') -47px 0;} - kustom background image pada 47px kanan (#home pembagi lebar 46px + 1px)
- #berikutnya {kiri: 129px; width: 43px;} - ke posisi 129px kanan (#prev 63px + lebar #prev adalah 43px + sisa space), lebarnya adalah 43px.
- #berikutnya {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - kustom background image pada 91px kanan (#home 46px + 1px pemisah jalur + # prev lebar 43px + 1px pemisah)
Ratakan gambar s - hover efek
Sekarang, kami ingin daftar menu kami untuk menambahkan efek hover.
 | : The efek hover pemilih untuk hover atas tampilan elemen Tip :: melayang pemilih dapat diterapkan untuk semua elemen. |
|---|
image baru kami ( "img_navsprites_hover.gif") berisi tiga gambar navigasi dan tiga gambar:
Karena ini adalah satu gambar, bukan enam file gambar terpisah saat pengguna tetap pada gambar tidak akan menunda pemuatan.
Kami menambahkan efek melayang menambahkan hanya tiga baris kode:
contoh
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
Coba »
contoh analisis:
- Karena item daftar berisi link, kita bisa menggunakan: hover pseudo-class
- #home a: hover {background: transparent url (img_navsprites_hover.gif) 0 -45px;} - Untuk ketiga gambar melayang kita tentukan posisi latar belakang yang sama, namun kemudian turun 45px setiap