Položaj ozadja - CSS-triki

Anonim

background-positionHotel v CSS vam omogoča, da se premaknete v ozadje (ali preliv) okoli znotraj posode.

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

Ima tri različne vrste vrednosti:

  • Vrednosti dolžine (npr. 100px 5px)
  • Odstotki (npr. 100% 5%)
  • Ključne besede (npr. top right)

Privzete vrednosti so 0 0. Sliko ozadja postavite v zgornji levi del vsebnika.

Vrednosti dolžine so precej preproste: prva vrednost je vodoravni položaj, druga vrednost pa navpični položaj. Tako se 100px 5pxbo slika premaknila za 100 slikovnih pik v desno in pet slikovnih pik navzdol. Vrednosti dolžine lahko nastavite v px, emali kateri koli drugi vrednosti dolžine CSS.

Odstotki delujejo nekoliko drugače. Spravite matematične klobuke: če premaknete sliko za ozadje za X%, bo točka X% na sliki poravnana s točko X% v vsebniku. Na primer, 50%pomeni, da bo sredino slike poravnal s sredino vsebnika. 100%pomeni, da bo zadnji piksel slike poravnal z zadnjo slikovno piko vsebnika itd.

Ključne besede so samo bližnjice za odstotke. Lažje si je zapomniti in pisati top rightkot 100% 0, zato so ključne besede stvar. Tu je seznam vseh petih ključnih besed in njihovih enakovrednih vrednosti:

  • top: 0% navpično
  • right: 100% vodoravno
  • bottom: 100% navpično
  • left: 0% vodoravno
  • center: 50% vodoravno, če vodoravno še ni določeno. Če je, se to uporabi navpično.

Zanimivo je omeniti, da ni pomembno, kakšen vrstni red uporabite za ključne besede: top centerje enak kot center top. To lahko storite le, če uporabljate izključno ključne besede. center 10%ni isto kot 10% center.

Demo

Ta predstavitev prikazuje primere background-positionkompleta z enotami dolžine, odstotki in ključnimi besedami.

Oglejte si vrednosti položaja peresa v okolju CSS-Tricks (@ css-tricks) na CodePen.

Deklariranje vrednosti

background-positionV sodobnih brskalnikih lahko navedete do štiri vrednosti (za podrobnosti glejte tabelo Podpora za brskalnike).

Če prijavite eno vrednost , je ta vrednost vodoravni odmik. Brskalnik nastavi navpični odmik na center.

Ko prijavite dve vrednosti , je prva vrednost vodoravni odmik, druga vrednost pa navpični odmik.

Stvari postanejo nekoliko bolj zapletene, ko začnete uporabljati tri ali štiri vrednosti, vendar dobite tudi večji nadzor nad umestitvijo v ozadju.

Sintaksa s tremi ali štirimi vrednostmi se izmenjuje med ključnimi besedami in enotami dolžine ali odstotka. Uporabite lahko katero koli vrednost ključnih besed, razen centerv background-positionizjavi s tremi ali štirimi vrednostmi .

Ko podate tri vrednosti , brskalnik prekliče »manjkajočo« četrto vrednost kot 0. Tu je primer tri vrednosti background-position:

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

Ta sliko ozadja postavi 45 px z desne in 0 px z dna vsebnika.

Tu je primer štirih vrednosti background-position :

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

S tem je slika ozadja 45px z desne in 20px z dna posode.

Upoštevajte vrstni red vrednosti v zgornjih primerih: ključne besede, ki jim sledijo dolžinske enote. Tri ali štiri vrednosti background-positionmorajo slediti tej obliki, ključna beseda pa mora biti pred enoto dolžine ali odstotka.

Demo

Ta predstavitev vključuje primere ene vrednosti, dveh vrednosti, treh vrednosti in štirih vrednosti background-position.

Oglejte si sintakso vrednosti ozadja Pen-position 1, 2, 3 in 4 s strani CSS-Tricks (@ css-tricks) na CodePen.

Sorodno

  • ozadje-priloga
  • posnetek za ozadje
  • Barva ozadja
  • slika ozadja
  • izvor-izvor
  • ozadje-ponovitev
  • velikost ozadja

Več virov

  • background-position v specifikaciji CSS3
  • background-position na MDN
  • Offset slike za ozadje

Podpora za brskalnik

Osnovne vrednosti so povsod podprte. Sintaksa s štirimi vrednostmi ima to podporo:

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
25. 13. 9. 12. 7.

Mobilni / tablični računalnik

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

To je enaka raven podpore kot lastnosti background-position-xin background-position-y.