Baggrundsposition - CSS-tricks

Anonim

Den background-positionejendom i CSS giver dig mulighed for at flytte et baggrundsbillede (eller gradient) rundt i dets beholder.

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

Det har tre forskellige typer værdier:

  • Længdeværdier (f.eks. 100px 5px)
  • Procentdele (f.eks. 100% 5%)
  • Nøgleord (f.eks. top right)

Standardværdierne er 0 0. Dette placerer dit baggrundsbillede øverst til venstre i containeren.

Længdeværdier er ret enkle: den første værdi er den vandrette position, den anden værdi er den lodrette position. Så 100px 5pxvil billedet flytte 100px til højre og fem pixels ned. Du kan indstille længdeværdier i px, emeller en hvilken som helst af de andre CSS-længdeværdier.

Procentdele fungerer lidt anderledes. Få dine matematiske hatte ud: at flytte et baggrundsbillede med X% betyder, at det vil justere X% punktet i billedet til X% punktet i beholderen. For eksempel 50%betyder det , at det vil justere midten af ​​billedet med midten af ​​beholderen. 100%betyder, at det vil justere den sidste pixel i billedet med den sidste pixel i beholderen og så videre.

Nøgleord er kun genveje for procenter. Det er lettere at huske og skrive top rightend 100% 0, og det er derfor, nøgleord er en ting. Her er en liste over alle fem nøgleord og deres ækvivalente værdier:

  • top: 0% lodret
  • right: 100% vandret
  • bottom: 100% lodret
  • left: 0% vandret
  • center: 50% vandret, hvis vandret ikke allerede er defineret. Hvis det er tilfældet, anvendes dette lodret.

Det er interessant at bemærke, at det ikke betyder noget, hvilken rækkefølge du bruger til nøgleordene: top centerer den samme som center top. Du kan kun gøre dette, hvis du udelukkende bruger nøgleord. center 10%er ikke det samme som 10% center.

Demo

Denne demo viser eksempler på background-positionsæt med længdeenheder, procenter og nøgleord.

Se pennens baggrundsværdier af CSS-Tricks (@ css-tricks) på CodePen.

Erklæring om værdier

Du kan give background-positionop til fire værdier i moderne browsere (se tabellen Browsersupport for detaljer).

Hvis du erklærer en værdi , er denne værdi den vandrette forskydning. Browseren indstiller den lodrette forskydning til center.

Når du erklærer to værdier , er den første værdi den vandrette forskydning, og den anden værdi er den lodrette forskydning.

Ting bliver lidt sværere, når du begynder at bruge tre eller fire værdier, men du får også mere kontrol over din baggrundsplacering.

En syntaks på tre eller fire værdier skifter mellem søgeord og længde- eller procentenheder. Du kan bruge en hvilken som helst af nøgleordsværdierne undtagen centeri en background-positionerklæring på tre eller fire værdier .

Når du angiver tre værdier , interpeterer browseren den "manglende" fjerde værdi som 0. Her er et eksempel på en tre-værdi background-position:

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

Dette placerer baggrundsbilledet 45 px fra højre og 0 px fra bunden af ​​containeren.

Her er et eksempel på en fire-værdi background-position :

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

Dette sætter baggrundsbilledet 45 px fra højre og 20 px fra bunden af ​​containeren.

Bemærk rækkefølgen af ​​værdierne i eksemplerne ovenfor: nøgleord efterfulgt af længdeenheder. En tre- eller fire-værdi background-positionskal følge dette format med et nøgleord, der går forud for en længde eller en procentenhed.

Demo

Denne demo inkluderer eksempler på en værdi, to værdi, tre værdi og fire værdi background-position.

Se pen baggrundsposition 1, 2, 3 og 4 syntaks af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • baggrund-vedhæftet fil
  • baggrund-klip
  • baggrundsfarve
  • baggrundsbillede
  • baggrund-oprindelse
  • baggrund-gentagelse
  • baggrundsstørrelse

Flere ressourcer

  • background-position i CSS3-specifikationen
  • background-position ved MDN
  • Offset baggrundsbilleder

Browsersupport

De grundlæggende værdier understøttes overalt. Syntaks med fire værdier har denne understøttelse:

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
25 13 9 12 7

Mobil / tablet

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

Det er det samme niveau af støtte som den background-position-xog background-position-yegenskaber.