Görüntü Spritelar
Bir resim sprite tek bir görüntü içine koymak görüntülerin topluluğudur.
Birçok görüntülerle bir web sayfası yüklenmesi uzun zaman alır ve çoklu sunucu istekleri oluşturur edebilirsiniz.
görüntü hareketleri kullaniliyor sunucu isteklerinin sayısını azaltmak ve bant genişliği kaydedecektir.
Görüntü Spritelar - Basit Örnek
Bunun yerine üç ayrı görüntüleri kullanmak yerine, biz bu tek resim kullanmak ("img_navsprites.gif") :
CSS ile, ihtiyacımız görüntünün sadece bir kısmını gösterebilir.
Aşağıdaki örnekte CSS hangi bölümünün belirtir "img_navsprites.gif" göstermek için resmin:
Example explained:
-
<img id="home" src="img_trans.gif">- çünkü sadece küçük saydam bir görüntü tanımlayan src özniteliği boş olamaz. Görüntülenen görüntü biz CSS belirttiğiniz arka plan görüntüsü olacak -
width: 46px; height: 44px;- Kullandığımız istediğiniz resmin bir bölümünü tanımlar -
background: url(img_navsprites.gif) 0 0;- Arka plan resmini ve konumunu tanımlar (left 0px, top 0px)
Bu şimdi bağlantıları kullanarak genişletmek ve etkilerini hover istiyorum, tümleşik resimleri kullanımı en kolay yoludur.
Görüntü Spritelar - Bir Navigasyon Liste Oluştur
Biz sprite resim kullanmak istiyorum ("img_navsprites.gif") bir navigasyon listesi oluşturmak için.
o bir bağlantı olmalı ve aynı zamanda bir arka plan görüntüsü destekler olabilir, çünkü bir HTML listesini kullanacağız:
Örnek
#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;
}
Kendin dene " Example explained:
- #navlist {position:relative;} - pozisyonu içine mutlak konumlandırılmasına izin vermek üzere görece olarak ayarlanır
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - marjı ve dolgu listesi tarzı çıkarılır, 0 olarak ayarlanır ve tüm liste öğeleri konumlandırılmış mutlak olan
- #navlist li, #navlist a {height:44px;display:block;} - tüm görüntülerin yüksekliği 44px olan
Şimdi her özel bölümü için pozisyon ve stil başlar:
- #home {left:0px;width:46px;} - konumlandırılmış en sola ve görüntü genişliği 46px olan
- #home {background: url(img_navsprites.gif) 0 0;} - tanımlar arka plan görüntüsü ve konumu (left 0px, top 0px)
- #prev {left:63px;width:43px;} - sağa 63px konumlandırılmış (#home width 46px + some extra space between items) , ve genişlik 43px olup.
- #prev {background: url('img_navsprites.gif') -47px 0;} - sağa arka plan görüntüsü 47px tanımlar (#home genişlik 46px + 1 piksel çizgi ayırıcı)
- #next {left:129px;width:43px;} - sağa 129px konumlandırılmış (#prev başlangıç 63px + #prev genişliği 43px + ekstra boşluk) arasında ve genişlik 43px olup.
- #next {background: url('img_navsprites.gif') -91px 0;} - sağa arka plan görüntüsü 91px tanımlar (#home genişlik 46px + 1 piksel çizgi ayırıcı + #prev genişliği 43px + 1 piksel çizgi ayırıcı)
Görüntü Spritelar - Hover Etkisi
Şimdi bizim navigasyon listesine bir hover efekti eklemek istiyorum.
İpucu: :hover seçici linklere kalmaz, bütün unsurları kullanılabilir.
Yeni resim ("img_navsprites_hover.gif") vurgulu etkileri için kullanılacak üç gezinme görüntüleri ve üç görüntüleri içerir:
Bu tek resim değil, altı ayrı dosyalar olduğu için orada olacak no loading delay kullanıcı resmin üzerine gelindiğinde.
Biz sadece hover efekti eklemek için kod üç satırları ekleyin:
Örnek
#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;
} Kendin dene " Örnek açıklanmıştır:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} her üç vurgulu görüntüler için biz sadece 45px daha da aşağı, aynı arka plan konumunu belirtmek -