Bakgrundsupprepa - CSS-tricks

Anonim

Om en background-imageegenskap anges, background-repeatdefinierar egenskapen i CSS om (och hur) den ska upprepas. Här är ett exempel:

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

Dessa är de möjliga värdena för den här egenskapen (förutom de vanliga sakerna som inherit):

  • repeat: kakel bilden i båda riktningarna. Detta är standardvärdet.
  • repeat-x: kakel bilden horisontellt
  • repeat-y: kakel bilden vertikalt
  • no-repeat: inte kakel, bara visa bilden en gång
  • space: kakel bilden i båda riktningarna. Beskär aldrig bilden om inte en enda bild är för stor för att passa. Om flera bilder kan passa, placera dem så att bilderna alltid rör vid kanterna.
  • round: kakel bilden i båda riktningarna. Beskär aldrig bilden om inte en enda bild är för stor för att passa. Om flera bilder kan passa med kvarvarande utrymme, kläm dem eller sträck dem för att fylla utrymmet. Om det är mindre än en halv bildbredd kvar, sträck, om det är mer, sträck.

Det finns också de två värdesyntaxerna:

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

Vilket gör syntaxerna för ett värde bara förkortning för syntaxen med två värden. Till exempel roundär det verkligen round round.

Du kan också komma-separera flera värden om du har att göra med flera bakgrunder.

Demo

Se Penns
bakgrundsupprepning av CSS-Tricks (@ css-tricks)
på CodePen.

Interaktiv demo om hur spaceoch roundarbete, jämfört med repeat:

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

En annan storleksändringsdemo som visar en "falsk" gräns:

Se
pennanpassad gränsbild
på det enkla sättet av ShopTalk Show (@shoptalkshow) på CodePen.

Här är en annan rolig demo med hamburgare som demonstrerar background-repeat: round;.

Relaterad

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

Resurser

  • CSS3 Spec
  • MDN

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

Den kommaseparerade synta med flera värden stöds endast i Firefox 3.6+ och IE 9+. Syntaxen med två värden för att styra horisontella och vertikala värden separerade stöds endast i Firefox 13+ och IE 9+. Den roundoch spacesökord är bara Firefox 49+ och IE 9+.