Pozice na pozadí - Triky CSS

Anonim

background-positionVlastnost CSS umožňuje přesunout obrázek na pozadí (nebo přechod) kolem ve svém obalu.

html ( background-position: 100px 5px; )

Má tři různé typy hodnot:

  • Hodnoty délky (např. 100px 5px)
  • Procenta (např. 100% 5%)
  • Klíčová slova (např. top right)

Výchozí hodnoty jsou 0 0. Tím se obrázek pozadí umístí do levé horní části kontejneru.

Hodnoty délky jsou velmi jednoduché: první hodnota je vodorovná poloha, druhá hodnota je svislá poloha. Takže 100px 5pxse bude pohybovat obrazu 100px napravo a pět bodů dolů. Hodnoty délky můžete nastavit v px, emnebo v jakékoli jiné hodnotě délky CSS.

Procenta fungují trochu jinak. Získejte své matematické klobouky: přesunutí obrázku na pozadí o X% znamená, že zarovná bod X% v obrázku s bodem X% v kontejneru. Například 50%znamená, že zarovná střed obrázku se středem kontejneru. 100%znamená, že zarovná poslední pixel obrázku s posledním pixelem kontejneru atd.

Klíčová slova jsou pouze zkratky pro procenta. Je snazší zapamatovat si a psát top rightnež 100% 0, a proto jsou klíčová slova věcí. Zde je seznam všech pěti klíčových slov a jejich ekvivalentních hodnot:

  • top: 0% svisle
  • right: 100% vodorovně
  • bottom: 100% svisle
  • left: 0% vodorovně
  • center: 50% horizontálně, pokud horizontální ještě není definována. Pokud ano, použije se svisle.

Je zajímavé poznamenat, že nezáleží na tom, jaké pořadí použijete pro klíčová slova: top centerje stejné jako center top. To však můžete udělat, pouze pokud používáte výhradně klíčová slova. center 10%není totéž jako 10% center.

Ukázka

Tato ukázka ukazuje příklady background-positionsady s jednotkami délky, procenty a klíčovými slovy.

Podívejte se na hodnoty polohy pozadí pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Deklarace hodnot

V background-positionmoderních prohlížečích můžete zadat až čtyři hodnoty (podrobnosti viz tabulka Podpora prohlížeče).

Pokud deklarujete jednu hodnotu , je touto hodnotou vodorovný posun. Prohlížeč nastaví svislé posunutí na center.

Když deklarujete dvě hodnoty , první hodnota je vodorovné posunutí a druhá hodnota je svislé posunutí.

Věci budou trochu složitější, když začnete používat tři nebo čtyři hodnoty, ale také získáte větší kontrolu nad umístěním na pozadí.

Syntaxe se třemi nebo čtyřmi hodnotami se střídá mezi klíčovými slovy a jednotkami délky nebo procenta. Můžete použít libovolnou z hodnot klíčových slov kromě deklarace centerse třemi nebo čtyřmi hodnotami background-position.

Když zadáte tři hodnoty , prohlížeč interpretuje „chybějící“ čtvrtou hodnotu jako 0. Zde je příklad tří hodnot background-position:

#threevalues ( background-position: right 45px bottom; )

Toto umístí obrázek na pozadí 45px zprava a 0px ze spodní části kontejneru.

Zde je příklad čtyřhodnoty background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Tím se obrázek pozadí umístí 45px zprava a 20px ze spodní části kontejneru.

Všimněte si pořadí hodnot v příkladech výše: klíčová slova následovaná jednotkami délky. Tomuto background-positionformátu musí odpovídat tři nebo čtyři hodnoty , přičemž klíčové slovo předchází jednotku délky nebo procenta.

Ukázka

Tato ukázka obsahuje příklady jedné hodnoty, dvou hodnot, tří hodnot a čtyř hodnot background-position.

Podívejte se na syntaxi hodnot pozic 1, 2, 3 a 4 pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • příloha na pozadí
  • klip na pozadí
  • barva pozadí
  • obrázek na pozadí
  • původ pozadí
  • opakování pozadí
  • velikost pozadí

Další zdroje

  • background-position ve specifikaci CSS3
  • background-position ve společnosti MDN
  • Ofsetové obrázky na pozadí

Podpora prohlížeče

Základní hodnoty jsou podporovány všude. Syntaxe se čtyřmi hodnotami má tuto podporu:

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
25 13 9 12 7

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1

To je stejná úroveň podpory jako vlastnosti background-position-xa background-position-y.