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.
background-position:-50px -50px;
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ı.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.kutu{width:50px;height:50px;background-image:url(css-sprite.jpg);background-position:-50px 0px;}
.kutu:hover{background-position:-50px -50px;}
</style>
</head>
<body>
<div class="kutu"></div>
</body>
</html>
Ö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.
UstaDerslik
