Önizleme : Background – Position Özelliği
İndir : Background – Position Özelliğini indir
Şimdi nasıl yapıcağımıza geçelim ben facebook resmini yapıcağım.Aşağıdaki gibi bir resim hazırladım yüksekliği 120px genişliği ise 60px
ilk üstteki mavi alttaki siyah üstüne gelince resim siyah olması için böyle yaptık.
Şimdi kodlamaya geçelim çok basit bir işlemi var.İlk olarak degis adında bir div class oluşturalım.Aşağıdaki gibi
oluşturalım.
CSS Background Position Kullanımı - dbasoft.net
Şimdi ise stil kodlarına geçelim.Aşağıdaki gibi olucak kodlar peki aşağıdaki ne yaptık hemen anlatayım.
degis adlı divi ilk olarak aldık.Genişliğini 60px yaptık yüksekliğinide 60px yaptık ve background url ile resim.png`yi seçtik.Resmin yüksekliği 120px di ama 60 yaptık ve mavi bölümünü gösterdik.
Daha sonra degis divinin üzerine gelince uygulanacak kodları yazdık background-position ile sağda soldan 0px yaptık.Üstten ise -60px ile aşağı aldık ve siyah resmi gösterdik.
.degis{float:left; width: 60px; height: 60px; background:url(resim.png);}
.degis:hover{background-position: 0px -60px; cursor:pointer;}
Buna daha değişik bir efekt vermek için ise hover bölümüne sunları yazalım.
transition:background-position 0.80s;
-webkit-transition:background-position 0.80s;
-moz :background-position 0.80s;
Kodlarım tümü aşağıdaki gibidir.
CSS Background Position Kullanımı - dbasoft.net
Kaynak : http://dbasoft.net/blog/html-css/css-background-position-kullanimi.html
