Fundal-repetare - CSS-Tricks

Anonim

Dacă background-imageeste specificată o proprietate, background-repeatproprietatea din CSS definește dacă (și cum) se va repeta. Iată un exemplu:

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

Acestea sunt valorile posibile pentru această proprietate (în afară de lucrurile obișnuite ca inherit):

  • repeat: țiglă imaginea în ambele direcții. Aceasta este valoarea implicită.
  • repeat-x: țiglă imaginea pe orizontală
  • repeat-y: țiglă imaginea pe verticală
  • no-repeat: nu țiglă, arată doar imaginea o dată
  • space: țiglă imaginea în ambele direcții. Nu tăiați niciodată imaginea decât dacă o singură imagine este prea mare pentru a se potrivi. Dacă se pot potrivi mai multe imagini, distanțați-le imaginile întâmplătoare atingând întotdeauna marginile.
  • round: țiglă imaginea în ambele direcții. Nu tăiați niciodată imaginea decât dacă o singură imagine este prea mare pentru a se potrivi. Dacă mai multe imagini se pot potrivi cu spațiul rămas, strângeți-le sau întindeți-le pentru a umple spațiul. Dacă rămâne mai puțin de jumătate de lățime a imaginii, întindeți, dacă este mai mult, întindeți.

Există, de asemenea, sintaxa celor două valori:

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

Ceea ce face ca sintaxele cu o singură valoare să fie abreviate pentru sintaxa cu două valori. De exemplu, roundeste într-adevăr round round.

De asemenea, puteți separa mai multe valori prin virgulă dacă aveți de-a face cu fundaluri multiple.

Demo

Vedeți
fundalul Pen -repeat de CSS-Tricks (@ css-tricks)
pe CodePen.

Demo interactiv despre cum spaceși roundfuncționează, în comparație cu repeat:

Vezi Pen
The Different `background-repeat`s de Chris Coyier (@chriscoyier)
pe CodePen.

O altă demonstrație de redimensionare, care arată o margine „falsă”:

Vedeți
imaginea de margine montată cu stilou în mod ușor de ShopTalk Show (@shoptalkshow)
pe CodePen.

Iată un alt demo distractiv cu demonstrații de hamburgeri background-repeat: round;.

Legate de

  • atașament de fundal
  • clip de fundal
  • culoare de fundal
  • imagine de fundal
  • fundal-origine
  • fundal-poziție
  • dimensiunea fundalului

Resurse

  • CSS3 Spec
  • MDN

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Sintaxa valorilor multiple separate prin virgulă este acceptată numai în Firefox 3.6+ și IE 9+. Sintaxa cu două valori pentru controlul valorilor orizontale și verticale separate doar acceptate în Firefox 13+ și IE 9+. roundȘi spacecuvintele cheie sunt numai pentru Firefox 49+ și IE 9+.