Baggrund-gentagelse - CSS-tricks

Anonim

Hvis en background-imageegenskab er specificeret, background-repeatdefinerer egenskaben i CSS, om (og hvordan) den gentages. Her er et eksempel:

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

Dette er de mulige værdier for denne egenskab (udover de sædvanlige ting som inherit):

  • repeat: fliser billedet i begge retninger. Dette er standardværdien.
  • repeat-x: fliser billedet vandret
  • repeat-y: fliser billedet lodret
  • no-repeat: ikke fliser, bare vis billedet en gang
  • space: fliser billedet i begge retninger. Beskær aldrig billedet, medmindre et enkelt billede er for stort til at passe. Hvis flere billeder kan passe, skal du placere dem, så de altid berører kanterne.
  • round: fliser billedet i begge retninger. Beskær aldrig billedet, medmindre et enkelt billede er for stort til at passe. Hvis flere billeder kan passe med resterende plads, skal du klemme dem eller strække dem for at fylde rummet. Hvis det er mindre end en halv billedbredde tilbage, stræk, hvis det er mere, stræk.

Der er også de to værdisyntakser:

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

Hvilket gør syntakserne med en værdi bare stenografi for syntaks med to værdier. For eksempel rounder det virkelig round round.

Du kan også kommaseparere flere værdier, hvis du har at gøre med flere baggrunde.

Demo

Se pennens
baggrunds-gentagelse af CSS-Tricks (@ css-tricks)
på CodePen.

Interaktiv demo om hvordan spaceog roundarbejde sammenlignet med repeat:

Se Pen
The Different `baggrunds-gentagelse`s af Chris Coyier (@chriscoyier)
på CodePen.

En anden ændringsstørrelse på demo, der viser en "falsk" grænse:

Se det
penmonterede kantbillede
på den nemme måde af ShopTalk Show (@shoptalkshow) på CodePen.

Her er endnu en sjov demo med hamburgere, der demonstrerer background-repeat: round;.

Relaterede

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

Ressourcer

  • CSS3 Spec
  • MDN

Browsersupport

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

Den kommaseparerede synta med flere værdier understøttes kun i Firefox 3.6+ og IE 9+. To-værdi-syntaksen til styring af vandrette og lodrette værdier adskilt understøttes kun i Firefox 13+ og IE 9+. Den roundog spacesøgeord er kun Firefox 49+ og IE 9+.