CSS'deki background-position
özellik, bir arka plan görüntüsünü (veya degradeyi) kabı içinde taşımanıza olanak tanır.
html ( background-position: 100px 5px; )
Üç farklı değer türü vardır:
- Uzunluk değerleri (örneğin
100px 5px
) - Yüzdeler (örneğin
100% 5%
) - Anahtar kelimeler (ör.
top right
)
Varsayılan değerler 0 0'dır. Bu, arka plan resminizi kabın sol üst kısmına yerleştirir.
Uzunluk değerleri oldukça basittir: İlk değer yatay konumdur, ikinci değer dikey konumdur. Böylece 100px 5px
, görüntüyü 100 piksel sağa ve beş piksel aşağı hareket ettirecektir. İçeri uzunluk değerlerini ayarlayabilir px
, em
ya da diğer CSS uzunluğu değerlerden herhangi.
Yüzdeler biraz farklı işliyor. Matematik şapkalarınızı çıkarın: Bir arka plan resmini% X oranında hareket ettirmek, resimdeki% X noktasını kaptaki% X noktasına hizalayacağı anlamına gelir. Örneğin 50%
, görüntünün ortasını kabın ortasıyla hizalayacağı anlamına gelir. 100%
görüntünün son pikselini kabın son pikseliyle hizalayacağı anlamına gelir, vb.
Anahtar kelimeler yalnızca yüzdeler için kısayollardır. Hatırlamak ve yazmaktan top right
daha kolaydır 100% 0
ve bu yüzden anahtar kelimeler bir şeydir. İşte beş anahtar kelimenin tümünün ve eşdeğer değerlerinin bir listesi:
top
:% 0 dikeyright
:% 100 yataybottom
:% 100 dikeyleft
:% 0 yataycenter
: Yatay önceden tanımlanmamışsa% 50 yatay olarak. Öyleyse, bu dikey olarak uygulanır.
Anahtar kelimeler için hangi sırayı kullandığınız önemli değildir: top center
ile aynıdır center top
. Ancak bunu yalnızca özel olarak anahtar kelimeler kullanıyorsanız yapabilirsiniz. center 10%
ile aynı değil 10% center
.
Demo
Bu demo, background-position
uzunluk birimleri, yüzdeler ve anahtar sözcüklerle küme örneklerini gösterir .
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem arka plan konumu değerlerine bakın.
Değerleri Bildirmek
background-position
Modern tarayıcılarda dört adede kadar değer verebilirsiniz (ayrıntılar için Tarayıcı Desteği tablosuna bakın).
Bir değer bildirirseniz, bu değer yatay uzaklıktır. Tarayıcı, dikey ofseti olarak ayarlar center
.
İki değer bildirdiğinizde , ilk değer yatay uzaklık ve ikinci değer dikey uzaklıktır.
Üç veya dört değeri kullanmaya başladığınızda işler biraz daha karmaşık hale gelir, ancak aynı zamanda arka plan yerleşiminiz üzerinde daha fazla kontrole sahip olursunuz.
Üç veya dört değerli sözdizimi, anahtar kelimeler ve uzunluk veya yüzde birimleri arasında değişir. center
Üç veya dört değerli bir background-position
bildirim dışında anahtar kelime değerlerinden herhangi birini kullanabilirsiniz .
Üç değer belirttiğinizde , tarayıcı "eksik" dördüncü değeri 0 olarak yorumlar. İşte üç değere bir örnek background-position
:
#threevalues ( background-position: right 45px bottom; )
Bu, arka plan görüntüsünü kabın sağından 45 piksel ve altından 0 piksel olarak konumlandırır.
İşte dört değerli bir örnek background-position
:
#fourvalues ( background-position: right 45px bottom 20px; )
Bu, arka plan görüntüsünü kabın sağından 45px ve altından 20px koyar.
Yukarıdaki örneklerdeki değerlerin sırasına dikkat edin: anahtar kelimeler ve ardından uzunluk birimleri. Bir background-position
uzunluk veya yüzde biriminin önünde bir anahtar kelime olacak şekilde üç veya dört değer bu biçimi izlemelidir.
Demo
Bu demo, bir değer, iki değer, üç değer ve dört değerden örnekler içerir background-position
.
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem arka plan konumu 1, 2, 3 ve 4 değer sözdizimine bakın.
İlişkili
- arka plan eki
- arka plan klibi
- arka plan rengi
- arka plan görüntüsü
- arkaplan kökenli
- arkaplan tekrar
- arkaplan boyutu
Daha fazla kaynak
background-position
CSS3 spesifikasyonundabackground-position
MDN'de- Ofset Arka Plan Resimleri
Tarayıcı Desteği
Temel değerler her yerde desteklenir. Dört değerli sözdizimi şu desteğe sahiptir:
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
Krom | Firefox | IE | Kenar | Safari |
---|---|---|---|---|
25 | 13 | 9 | 12 | 7 |
Mobil / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 4.4 | 7.0-7.1 |
Bu, background-position-x
ve background-position-y
özellikleriyle aynı düzeyde destek .