Bakgrunnsposisjon - CSS-triks

Anonim

Den background-positioneiendom i CSS kan du flytte et bakgrunnsbilde (eller gradient) rundt i beholderen sin.

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

Den har tre forskjellige typer verdier:

  • Lengdeverdier (f.eks. 100px 5px)
  • Prosentandel (f.eks. 100% 5%)
  • Nøkkelord (f.eks. top right)

Standardverdiene er 0 0. Dette plasserer bakgrunnsbildet ditt øverst til venstre i beholderen.

Lengdeverdiene er ganske enkle: den første verdien er den horisontale posisjonen, den andre verdien er den vertikale posisjonen. Så 100px 5pxvil bildet flytte 100px til høyre og fem piksler nedover. Du kan angi lengdeverdier i px, emeller hvilken som helst av de andre CSS-lengdeverdiene.

Prosentandel fungerer litt annerledes. Få mattehattene ut: å flytte et bakgrunnsbilde med X% betyr at det vil justere X% -punktet i bildet til X% -punktet i beholderen. For eksempel 50%betyr det at den vil justere midten av bildet med midten av beholderen. 100%betyr at den vil justere den siste piksler i bildet med den siste piksel i beholderen, og så videre.

Nøkkelord er bare snarveier for prosentandeler. Det er lettere å huske og skrive top rightenn 100% 0, og det er derfor nøkkelord er en ting. Her er en liste over alle fem søkeordene og deres tilsvarende verdier:

  • top: 0% vertikalt
  • right: 100% vannrett
  • bottom: 100% vertikalt
  • left: 0% vannrett
  • center: 50% horisontalt hvis vannrett ikke allerede er definert. Hvis det er, blir dette brukt vertikalt.

Det er interessant å merke seg at det ikke betyr noe hvilken rekkefølge du bruker på nøkkelordene: top centerer den samme som center top. Du kan bare gjøre dette hvis du bare bruker søkeord. center 10%er ikke det samme som 10% center.

Demo

Denne demoen viser eksempler på background-positionsett med lengdeenheter, prosenter og nøkkelord.

Se pennens bakgrunnsposisjonsverdier av CSS-Tricks (@ css-tricks) på CodePen.

Deklarere verdier

Du kan gi background-positionopptil fire verdier i moderne nettlesere (se nettleserstøttetabellen for detaljer).

Hvis du erklærer en verdi , er denne verdien den horisontale forskyvningen. Nettleseren setter den vertikale forskyvningen til center.

Når du deklarerer to verdier , er den første verdien den horisontale forskyvningen, og den andre verdien er den vertikale forskyvningen.

Ting blir litt vanskeligere når du begynner å bruke tre eller fire verdier, men du får også mer kontroll over bakgrunnsplasseringen.

En syntaks på tre eller fire verdier veksler mellom nøkkelord og lengde- eller prosentenheter. Du kan bruke hvilken som helst av søkeordverdiene bortsett fra centeri en background-positionerklæring om tre eller fire verdier .

Når du spesifiserer tre verdier , tolker nettleseren den "manglende" fjerde verdien som 0. Her er et eksempel på en treverdi background-position:

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

Dette plasserer bakgrunnsbildet 45 px fra høyre og 0 px fra bunnen av beholderen.

Her er et eksempel på en fireverdi background-position :

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

Dette setter bakgrunnsbildet 45px fra høyre og 20px fra bunnen av beholderen.

Legg merke til rekkefølgen på verdiene i eksemplene ovenfor: nøkkelord etterfulgt av lengdeenheter. En tre- eller fireverdi background-positionmå følge det formatet, med et nøkkelord foran lengden eller prosentandelenheten.

Demo

Denne demoen inneholder eksempler på en verdi, to verdi, tre verdi og fire verdi background-position.

Se pennens bakgrunnsposisjon 1, 2, 3 og 4-syntaks av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

  • bakgrunn-vedlegg
  • bakgrunn-klipp
  • bakgrunnsfarge
  • bakgrunnsbilde
  • bakgrunn-opprinnelse
  • bakgrunn-gjenta
  • bakgrunnsstørrelse

Flere ressurser

  • background-position i CSS3-spesifikasjonen
  • background-position ved MDN
  • Offset bakgrunnsbilder

Nettleserstøtte

De grunnleggende verdiene støttes overalt. Syntaksen med fire verdier har denne støtten:

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
25 1. 3 9 12 7

Mobil / nettbrett

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

Det er samme støttenivå som background-position-xog background-position-yegenskapene.