Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme

Tek parça resim dosyası

İnternet  Sitelerin bir çoğu son günlerde Bu Css Mantığını kullanılmaktadır Peki bu mantık nedir ve bize yararları nedir.

Bir resim dosyası üzerine (uzantısı fark etmez) Sitenizde gerekli olan resim ya da İconları bu resim dosyası  üzerine belirli aralıklarla koyunuz (bu işlem için en uygun program Photoshop ‘dur) ve bu resim kaydedin ve sitenize koyun site yüklenirken explorer bütün icon ve resimler bir dosaya üzerinde olduğu için indirmesi ve açması daha kolay olucak ve az yer kaplamış olucak  böylece hızlı bir hizmet ve alandan fayda sağlanmış olacak

Örnek:

Tek parça resim dosyasından ilgili resmi CSS ile gösterme

Uygulama Resmimiz iconların bulunduğu bir resim bu resim örnek için uygun.İlk aşamada Dreamweaver’ın Kod kısmında geçin ve Şu kodalrı yapıştırınız

<div style=" float:left; background-image:url(all.png);width:40px; height:40px;background-repeat:no-repeat; background-position:0px -5px"></div>

 

Üst kodda  Resmimizin adı ,Genişliği,yüksekliği,tekrarlanma seçenekleri gibi kod satırlıarı bulunmaktadır.

Bu kod sonucu oluşan görüntü Şu şekildir.



Tek parça resim dosyasından ilgili resmi CSS ile gösterme

Görülüğü gibi istenilen noktalar alındı ve bir sitede onca resim dosayası kullanılmasına gerek kalmadı bu bir avantajdır.

‘background-position’ seçeneği resimde hangi bölgenin gösterileceğini belirttiğimiz yerdir. Burada seçeneğe karşılık x ve y koordinatları verilir ve daha sonra bu verilen koordinatlardaki resmin bölümü belirtilen boyutta ekrana yüklenir.

Hazırlayan: Samet ERDEM

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...