Bakgrundsposition - CSS-tricks

Anonim

Den background-positionegendom i CSS kan du flytta en bakgrundsbild (eller gradient) runt i sin behållare.

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

Den har tre olika typer av värden:

  • Längdvärden (t.ex. 100px 5px)
  • Procent (t.ex. 100% 5%)
  • Nyckelord (t.ex. top right)

Standardvärdena är 0 0. Detta placerar din bakgrundsbild längst upp till vänster i behållaren.

Längdvärdena är ganska enkla: det första värdet är det horisontella läget, det andra värdet är det vertikala läget. Så 100px 5pxkommer bilden att flyttas 100 pixlar till höger och fem pixlar nedåt. Du kan ställa in längdvärden i px, emeller något av de andra CSS-längdvärdena.

Procentandelar fungerar lite annorlunda. Ta bort dina matematiska hattar: att flytta en bakgrundsbild med X% betyder att den kommer att justera X% -punkten i bilden till X% -punkten i behållaren. Till exempel 50%betyder det att den kommer att justera mitten av bilden med mitten av behållaren. 100%betyder att den kommer att justera den sista pixeln i bilden med den sista pixeln i behållaren och så vidare.

Nyckelord är bara genvägar för procent. Det är lättare att komma ihåg och skriva top rightän 100% 0, och det är därför nyckelord är en sak. Här är en lista med alla fem nyckelord och motsvarande värden:

  • top: 0% vertikalt
  • right: 100% horisontellt
  • bottom: 100% vertikalt
  • left: 0% horisontellt
  • center: 50% horisontellt om horisontellt inte redan är definierat. Om det är så tillämpas detta vertikalt.

Det är intressant att notera att det spelar ingen roll vilken ordning du använder för nyckelorden: top centerär samma som center top. Du kan bara göra detta om du endast använder sökord. center 10%är inte samma sak som 10% center.

Demo

Denna demo visar exempel på background-positionuppsättning med längdenheter, procentsatser och nyckelord.

Se Penns bakgrundspositionsvärden av CSS-Tricks (@ css-tricks) på CodePen.

Deklarera värden

Du kan ge background-positionupp till fyra värden i moderna webbläsare (se tabellen Browser Support för mer information).

Om du deklarerar ett värde är det värdet den horisontella förskjutningen. Webbläsaren ställer in den vertikala förskjutningen till center.

När du deklarerar två värden är det första värdet den horisontella förskjutningen och det andra värdet den vertikala förskjutningen.

Saker blir lite knepigare när du börjar använda tre eller fyra värden, men du får också mer kontroll över din bakgrundsplacering.

En syntax med tre eller fyra värden växlar mellan nyckelord och längd eller procentenheter. Du kan använda vilket som helst av sökordsvärdena utom centeri en background-positiondeklaration med tre eller fyra värden .

När du anger tre värden interpeterar webbläsaren det "saknade" fjärde värdet som 0. Här är ett exempel på ett trevärde background-position:

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

Detta placerar bakgrundsbilden 45 pixlar från höger och 0 pixlar från behållarens botten.

Här är ett exempel på ett fyrvärde background-position :

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

Detta sätter bakgrundsbilden 45px från höger och 20px från botten av behållaren.

Lägg märke till ordningen på värdena i exemplen ovan: nyckelord följt av längdenheter. Ett tre- eller fyravärde background-positionmåste följa det formatet, med ett nyckelord före en längd eller en procentenhet.

Demo

Denna demo innehåller exempel på ett värde, två värde, tre värde och fyra värde background-position.

Se penns bakgrundssposition 1, 2, 3 och 4 syntax av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • bakgrundsbilaga
  • bakgrund-klipp
  • bakgrundsfärg
  • bakgrundsbild
  • bakgrund-ursprung
  • bakgrund-upprepa
  • bakgrundsstorlek

Fler resurser

  • background-position i CSS3-specifikationen
  • background-position vid MDN
  • Offset bakgrundsbilder

Webbläsarstöd

Grundvärdena stöds överallt. Syntaxen med fyra värden har detta stöd:

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
25 13 9 12 7

Mobil / surfplatta

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

Det är samma stödnivå som background-position-xoch background-position-yegenskaperna.