Fundal-poziție - CSS-Tricks

Anonim

background-positionProprietatea în CSS vă permite să mutați o imagine de fundal (sau gradient) în jurul său în interiorul recipientului.

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

Are trei tipuri diferite de valori:

  • Valorile lungimii (de ex. 100px 5px)
  • Procente (de ex. 100% 5%)
  • Cuvinte cheie (de ex. top right)

Valorile implicite sunt 0 0. Aceasta plasează imaginea de fundal în partea stângă sus a containerului.

Valorile lungimii sunt destul de simple: prima valoare este poziția orizontală, a doua valoare este poziția verticală. Deci 100px 5px, imaginea va fi mutată 100px spre dreapta și cu cinci pixeli în jos. Puteți seta valori de lungime în px, emsau oricare dintre celelalte valori de lungime CSS.

Procentele funcționează puțin diferit. Scoateți pălăriile matematice: deplasarea unei imagini de fundal cu X% înseamnă că va alinia punctul X% din imagine la punctul X% din container. De exemplu, 50%înseamnă că va alinia mijlocul imaginii cu mijlocul containerului. 100%înseamnă că va alinia ultimul pixel al imaginii cu ultimul pixel al containerului și așa mai departe.

Cuvintele cheie sunt doar comenzi rapide pentru procente. Este mai ușor de reținut și de scris top rightdecât 100% 0și de aceea cuvintele cheie sunt un lucru. Iată o listă cu toate cele cinci cuvinte cheie și valorile echivalente ale acestora:

  • top: 0% pe verticală
  • right: 100% pe orizontală
  • bottom: 100% pe verticală
  • left: 0% pe orizontală
  • center: 50% orizontal dacă orizontalul nu este deja definit. Dacă este, atunci se aplică vertical.

Este interesant de notat că nu contează în ce ordine utilizați pentru cuvintele cheie: top centereste același ca și center top. Puteți face acest lucru numai dacă utilizați exclusiv cuvinte cheie. center 10%nu este același lucru ca și 10% center.

Demo

Această demonstrație prezintă exemple de background-positionseturi cu unități de lungime, procente și cuvinte cheie.

Consultați valorile poziției de fundal a stiloului de CSS-Tricks (@ css-tricks) pe CodePen.

Declararea valorilor

Puteți da background-positionpână la patru valori în browserele moderne (consultați tabelul de asistență pentru browser pentru detalii).

Dacă declarați o valoare , acea valoare este decalajul orizontal. Browserul setează decalajul vertical la center.

Când declarați două valori , prima valoare este decalajul orizontal și a doua valoare este decalajul vertical.

Lucrurile devin puțin mai complicate atunci când începeți să utilizați trei sau patru valori, dar, de asemenea, obțineți un control mai mare asupra plasării dvs. în fundal.

O sintaxă cu trei sau patru valori alternează între cuvinte cheie și lungime sau unități procentuale. Puteți utiliza oricare dintre valorile cuvintelor cheie, cu excepția centerunei background-positiondeclarații cu trei sau patru valori .

Când specificați trei valori , browserul interpune a patra valoare „lipsă” ca 0. Iată un exemplu de trei valori background-position:

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

Aceasta poziționează imaginea de fundal 45px din dreapta și 0px din partea inferioară a containerului.

Iată un exemplu de patru valori background-position :

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

Aceasta plasează imaginea de fundal la 45 px din dreapta și 20 px din partea inferioară a containerului.

Observați ordinea valorilor din exemplele de mai sus: cuvinte cheie urmate de unități de lungime. O valoare de trei sau patru background-positiontrebuie să urmeze acel format, cu un cuvânt cheie care precedă o lungime sau o unitate procentuală.

Demo

Această demonstrație include exemple de o valoare, două valori, trei valori și patru valori background-position.

Vedeți sintaxa valorii poziției 1, 2, 3 și 4 a stilului Pen de la CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • atașament de fundal
  • clip de fundal
  • culoare de fundal
  • imagine de fundal
  • fundal-origine
  • fundal-repetare
  • dimensiunea fundalului

Mai multe resurse

  • background-position în spec. CSS3
  • background-position la MDN
  • Imagini de fundal compensate

Suport pentru browser

Valorile de bază sunt acceptate peste tot. Sintaxa cu patru valori are acest suport:

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
25 13 9 12 7

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 4.4 7.0-7.1

Acesta este același nivel de suport ca background-position-xși background-position-yproprietățile.