CSS Ders-21 Background-position Kullanımı
Soru-Cevap Yararlı Araçlar Teknoloji Chat CSS Ders-21 Background-position Kullanımı
CSS derslerimize devam ediyoruz.Bu dersimizde css sprite tekniği olan background-positionu anlatacağım.Öncelikle işlevinden bahsedelim.Sitemizde bir çok yerinde resimler kullanmak zorunda kalırız.Bunların hepsi tek tek yüklenir sayfaya.Biz bunların hepsini tek resim haline getirip öyle kullanacağız.Bu şekilde kullanırsak sayfaya tek resim yüklenir ve istediğimiz yerde istediğimiz kısmı gösterebiliriz.
Elimizde bu şekilde bir resim var diyelim.Arkaplan olarak atıyoruz.Daha sonra hangi kısmın gözükeceğini background-position ile belirliyoruz.
Gördüğünüz gibi 2 parametre alıyor.
-İlk parametre + değeri resimi sağa doğru kaydırıyor,- değeri ise sola doğru kaydırıyor.
-İkinci parametrede ise + değer aşağı doğru kaydırma yapıyor,- değeri ise yukarı doğru kaydırma yapıyor.
Bu şekilde tek bir arkaplan atayarak istediğimiz bölümü gösteriyoruz.Her hangi bir işlem sırasında arkaplan değişecekse bu yöntemle çok hızlı değişir.Nedeni ise resimin sayfaya yüklenmiş olması.
Örneği indir : http://ustaderslik.com/dosya/background-position.rar Yukarıdaki örnekte ilk olarak ilk sıradaki facebook iconunu gösterdik hover işleminde onun bir altındaki facebook iiconunu gösterdik.