Bakgrunn-gjenta - CSS-triks

Anonim

Hvis en background-imageegenskap er spesifisert, background-repeatdefinerer egenskapen i CSS om (og hvordan) den skal gjentas. Her er et eksempel:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Dette er de mulige verdiene for denne egenskapen (i tillegg til de vanlige tingene som inherit):

  • repeat: fliser bildet i begge retninger. Dette er standardverdien.
  • repeat-x: fliser bildet vannrett
  • repeat-y: fliser bildet vertikalt
  • no-repeat: ikke flis, bare vis bildet en gang
  • space: fliser bildet i begge retninger. Beskjær aldri bildet med mindre et enkelt bilde er for stort til å passe. Hvis flere bilder kan passe, kan du plassere dem, slik at de alltid berører kantene.
  • round: fliser bildet i begge retninger. Beskjær aldri bildet med mindre et enkelt bilde er for stort til å passe. Hvis flere bilder kan passe med plass som er igjen, klemmer du dem eller strekker dem for å fylle rommet. Hvis det er mindre enn en halv bildebredde igjen, strekk, hvis det er mer, strekk.

Det er også de to verdisyntaksene:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Som gjør at enkeltverdisyntaksene bare er forkortelse for toverdisyntaksen. For eksempel rounder det virkelig round round.

Du kan også kommaseparere flere verdier hvis du har å gjøre med flere bakgrunner.

Demo

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

Interaktiv demo om hvordan spaceog roundarbeid, sammenlignet med repeat:

Se Pen
The Different `bakgrunn-repetisjon` av Chris Coyier (@chriscoyier)
på CodePen.

En annen størrelse på demonstrasjon, som viser en "falsk" kant:

Se
pennmontert kantbilde
på den enkle måten av ShopTalk Show (@shoptalkshow) på CodePen.

Her er nok en morsom demo med hamburgere som demonstrerer background-repeat: round;.

I slekt

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

Ressurser

  • CSS3 spesifikasjon
  • MDN

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Kommaseparert syntas med flere verdier støttes bare i Firefox 3.6+ og IE 9+. Toverdisyntaks for å kontrollere horisontale og vertikale verdier som er atskilt, støttes bare i Firefox 13+ og IE 9+. Den roundog spacesøkeord er bare Firefox 49+ og IE 9+.