Ripetizione in background - Trucchi CSS

Anonim

Se background-imageviene specificata una proprietà, la background-repeatproprietà in CSS definisce se (e come) si ripeterà. Ecco un esempio:

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

Questi sono i possibili valori per questa proprietà (oltre alle solite cose come inherit):

  • repeat: affianca l'immagine in entrambe le direzioni. Questo è il valore predefinito.
  • repeat-x: affianca l'immagine orizzontalmente
  • repeat-y: affianca l'immagine verticalmente
  • no-repeat: non affiancare, mostra solo l'immagine una volta
  • space: affianca l'immagine in entrambe le direzioni. Non ritagliare mai l'immagine a meno che una singola immagine non sia troppo grande per adattarsi. Se più immagini possono adattarsi, distanziale in modo che le immagini tocchino sempre i bordi.
  • round: affianca l'immagine in entrambe le direzioni. Non ritagliare mai l'immagine a meno che una singola immagine non sia troppo grande per adattarsi. Se più immagini possono adattarsi allo spazio rimanente, schiacciale o allungale per riempire lo spazio. Se è rimasta meno della metà della larghezza di un'immagine, allunga, se è maggiore, allunga.

C'è anche la sintassi dei due valori:

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

Il che rende le sintassi a valore singolo solo una scorciatoia per la sintassi a due valori. Ad esempio, roundè davvero round round.

Puoi anche separare più valori da virgole se hai a che fare con più sfondi.

Demo

Vedi Pen
background-repeat di CSS-Tricks (@ css-tricks)
su CodePen.

Demo interattiva su come spacee roundlavorare, rispetto a repeat:

Vedere Pen
The Different `background-repeat`s di Chris Coyier (@chriscoyier)
su CodePen.

Un'altra demo di ridimensionamento, che mostra un bordo "falso":

Guarda l'
immagine del bordo con la penna in modo semplice da ShopTalk Show (@shoptalkshow)
su CodePen.

Ecco un'altra divertente demo con dimostrazione di hamburger background-repeat: round;.

Relazionato

  • sfondo-allegato
  • clip di sfondo
  • colore di sfondo
  • immagine di sfondo
  • background-origin
  • background-position
  • dimensione dello sfondo

Risorse

  • Specifiche CSS3
  • MDN

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

La sintassi di valori multipli separati da virgole è supportata solo in Firefox 3.6+ e IE 9+. La sintassi a due valori per il controllo dei valori orizzontali e verticali separati è supportata solo in Firefox 13+ e IE 9+. Le parole chiave rounde spacesono solo Firefox 49+ e IE 9+.