CSS Ders-21 Background-position Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-21 Background-position Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2741)
RAPOR ET
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.

http://ustaderslik.com/resim/ders/vfl6j.jpg

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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol