Pozícia na pozadí - Triky CSS

Anonim

background-positionVlastnosť CSS umožňuje presunúť obrázok na pozadí (alebo prechod) okolo vo svojom obale.

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

Má tri rôzne typy hodnôt:

  • Hodnoty dĺžky (napr. 100px 5px)
  • Percentá (napr. 100% 5%)
  • Kľúčové slová (napr. top right)

Predvolené hodnoty sú 0 0. Týmto sa váš obrázok na pozadí umiestni do ľavej hornej časti kontajnera.

Hodnoty dĺžky sú dosť jednoduché: prvá hodnota je vodorovná poloha, druhá hodnota je zvislá poloha. 100px 5pxObrázok sa teda posunie o 100 pixelov doprava a päť pixelov nadol. Hodnoty dĺžky môžete nastaviť v px, emalebo v ktorejkoľvek z ďalších hodnôt dĺžky CSS.

Percentá fungujú trochu inak. Získajte svoje matematické klobúky: posunutie obrázka na pozadí o X% znamená, že sa zarovná bod X% na obrázku s bodom X% v kontajneri. Napríklad 50%znamená, že zarovná stred obrázka so stredom kontajnera. 100%znamená, že zarovná posledný pixel obrázka s posledným pixelom kontajnera atď.

Kľúčové slová sú iba skratky pre percentá. Je to jednoduchšie si pamätať a písať top rightako 100% 0, a to je dôvod, prečo kľúčové slová sú vecou. Tu je zoznam všetkých piatich kľúčových slov a ich ekvivalentných hodnôt:

  • top: 0% vertikálne
  • right: 100% vodorovne
  • bottom: 100% vertikálne
  • left: 0% vodorovne
  • center: 50% horizontálne, ak horizontálna ešte nie je definovaná. Ak je, potom sa použije vertikálne.

Je zaujímavé, že nezáleží na tom, aké poradie použijete pre kľúčové slová: top centerje rovnaké ako center top. Môžete to však urobiť, iba ak výlučne používate kľúčové slová. center 10%nie je to isté ako 10% center.

Ukážka

Táto ukážka zobrazuje príklady background-positionmnožiny s jednotkami dĺžky, percentami a kľúčovými slovami.

Pozrite si hodnoty pozícií pera na pozadí od CSS-Tricks (@ css-tricks) na CodePen.

Deklarovanie hodnôt

V background-positionmoderných prehľadávačoch môžete zadať až štyri hodnoty (podrobnosti nájdete v tabuľke Podpora prehľadávača).

Ak deklarujete jednu hodnotu , tou hodnotou je vodorovný posun. Prehliadač nastaví zvislé posunutie na center.

Keď deklarujete dve hodnoty , prvá hodnota je vodorovné posunutie a druhá hodnota je zvislé posunutie.

Keď začnete používať tri alebo štyri hodnoty, veci budú trochu komplikovanejšie, získate však tiež väčšiu kontrolu nad umiestnením na pozadí.

Troj alebo štvorhodnotová syntax sa strieda medzi kľúčovými slovami a dĺžkou alebo percentuálnymi jednotkami. Môžete použiť ktorúkoľvek z hodnôt kľúčového slova okrem deklarácie s centertromi alebo štyrmi hodnotami background-position.

Keď zadáte tri hodnoty , prehliadač interpetuje „chýbajúcu“ štvrtú hodnotu ako 0. Tu je príklad troch hodnôt background-position:

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

Toto umiestni obrázok na pozadí 45px sprava a 0px spodok kontajnera.

Tu je príklad štvorhodnoty background-position :

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

Takto sa obrázok na pozadí umiestni 45 pixelov sprava a 20 pixelov naspodok kontajnera.

Všimnite si poradie hodnôt v príkladoch vyššie: kľúčové slová, za ktorými nasledujú jednotky dĺžky. Tomuto background-positionformátu musí zodpovedať troj alebo štvorhodnota , pričom kľúčové slovo musí predchádzať dĺžkovej alebo percentuálnej jednotke.

Ukážka

Táto ukážka obsahuje príklady jednej hodnoty, dvoch hodnôt, troch hodnôt a štyroch hodnôt background-position.

Pozrite si syntax hodnoty pozícií pera 1, 2, 3 a 4 od CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

  • príloha na pozadí
  • klip na pozadie
  • farba pozadia
  • obrázok na pozadí
  • pôvod pozadia
  • opakovanie pozadia
  • veľkosť pozadia

Ďalšie zdroje

  • background-position v CSS3 spec
  • background-position na MDN
  • Ofsetové obrázky na pozadí

Podpora prehľadávača

Základné hodnoty sú podporované všade. Syntax štyroch hodnôt má túto podporu:

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
25 13 9 12 7

Mobil / tablet

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

To je rovnaká úroveň podpory ako vlastnosti background-position-xa background-position-y.