Achtergrondpositie - CSS-trucs

Anonim

Met de background-positioneigenschap in CSS kunt u een achtergrondafbeelding (of verloop) binnen de container verplaatsen.

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

Het heeft drie verschillende soorten waarden:

  • Lengte waarden (bijv. 100px 5px)
  • Percentages (bijv. 100% 5%)
  • Trefwoorden (bijv. top right)

De standaardwaarden zijn 0 0. Hiermee wordt je achtergrondafbeelding linksboven in de container geplaatst.

Lengtewaarden zijn vrij eenvoudig: de eerste waarde is de horizontale positie, de tweede waarde is de verticale positie. De 100px 5pxafbeelding wordt dus 100 px naar rechts en vijf pixels naar beneden verplaatst. U kunt lengtewaarden instellen in px, emof een van de andere CSS-lengtewaarden.

Percentages werken een beetje anders. Haal je wiskundige hoed tevoorschijn: als je een achtergrondafbeelding met X% verplaatst, wordt het X% -punt in de afbeelding uitgelijnd met het X% -punt in de container. Dit 50%betekent bijvoorbeeld dat het midden van de afbeelding wordt uitgelijnd met het midden van de container. 100%betekent dat de laatste pixel van de afbeelding wordt uitgelijnd met de laatste pixel van de container, enzovoort.

Trefwoorden zijn slechts snelkoppelingen voor percentages. Het is gemakkelijker te onthouden en te schrijven top rightdan 100% 0, en daarom zijn zoekwoorden iets. Hier is een lijst met alle vijf trefwoorden en hun equivalente waarden:

  • top: 0% verticaal
  • right: 100% horizontaal
  • bottom: 100% verticaal
  • left: 0% horizontaal
  • center: 50% horizontaal als horizontaal nog niet is gedefinieerd. Als dit het geval is, wordt deze verticaal aangebracht.

Het is interessant om op te merken dat het niet uitmaakt in welke volgorde u de trefwoorden gebruikt: top centeris hetzelfde als center top. U kunt dit echter alleen doen als u uitsluitend zoekwoorden gebruikt. center 10%is niet hetzelfde als 10% center.

Demo

Deze demo toont voorbeelden van background-positionsets met lengte-eenheden, percentages en trefwoorden.

Zie de waarden voor de achtergrondpositie van de pen door CSS-Tricks (@ css-tricks) op CodePen.

Waarden declareren

U kunt background-positionin moderne browsers maximaal vier waarden opgeven (zie de tabel Browserondersteuning voor details).

Als u één waarde opgeeft , is die waarde de horizontale offset. De browser stelt de verticale offset in op center.

Als u twee waarden declareert , is de eerste waarde de horizontale offset en de tweede waarde de verticale offset.

Het wordt een beetje lastiger als u drie of vier waarden gaat gebruiken, maar u krijgt ook meer controle over uw achtergrondplaatsing.

Een syntaxis van drie of vier waarden wisselt tussen trefwoorden en lengte- of percentage-eenheden. U kunt elk van de sleutelwoordwaarden gebruiken, behalve centerin een background-positiondeclaratie van drie of vier waarden .

Als u drie waarden opgeeft , interpreteert de browser de 'ontbrekende' vierde waarde als 0. Hier is een voorbeeld van een drie-waarde background-position:

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

Hierdoor wordt de achtergrondafbeelding 45 px vanaf de rechterkant en 0 px vanaf de onderkant van de container geplaatst.

Hier is een voorbeeld van een vierwaarde background-position :

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

Dit plaatst de achtergrondafbeelding 45 px vanaf de rechterkant en 20 px vanaf de onderkant van de container.

Let op de volgorde van de waarden in de bovenstaande voorbeelden: trefwoorden gevolgd door lengte-eenheden. Een drie- of vierwaarde background-positionmoet die indeling volgen, met een trefwoord voorafgaand aan een lengte- of percentage-eenheid.

Demo

Deze demo bevat voorbeelden van één waarde, twee waarde, drie waarde en vier waarde background-position.

Zie de Pen background-position 1, 2, 3, and 4 value syntax by CSS-Tricks (@ css-tricks) op CodePen.

Verwant

  • achtergrond-bijlage
  • achtergrond-clip
  • Achtergrond kleur
  • achtergrond afbeelding
  • achtergrond-oorsprong
  • achtergrond herhaling
  • achtergrondgrootte

Meer middelen

  • background-position in de CSS3-specificatie
  • background-position bij MDN
  • Offset achtergrondafbeeldingen

Browser-ondersteuning

De basiswaarden worden overal ondersteund. De syntaxis met vier waarden heeft deze ondersteuning:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
25 13 9 12 7

Mobiel / tablet

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

Dat is hetzelfde ondersteuningsniveau als de background-position-xen background-position-yeigenschappen.