Arka plan konumu - CSS Hileleri

Anonim

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, emya 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 rightdaha kolaydır 100% 0ve 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 dikey
  • right:% 100 yatay
  • bottom:% 100 dikey
  • left:% 0 yatay
  • center: 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 centerile 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-positionuzunluk 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-positionModern 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-positionbildirim 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-positionuzunluk 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 spesifikasyonunda
  • background-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-xve background-position-yözellikleriyle aynı düzeyde destek .