Ripeti di sfondo in CSS

Quando impostiamo un'immagine di sfondo su qualsiasi pagina Web per impostazione predefinita, l'immagine verrà posizionata nell'angolo in alto a sinistra e verrà ripetuta in direzioni orizzontali e verticali. CSS fornisce una proprietà di ripetizione in background per gestire il comportamento di ripetizione dell'immagine.

Possiamo eseguire le seguenti funzionalità utilizzando la proprietà di repeat di background:

• no-ripeat evita la ripetizione dell'immagine.
• ripetizione-x Ripete un'immagine in direzione orizzontale.
• ripetizione Ripete un'immagine in direzione verticale.
• spazio Ripete l'immagine senza ritaglio e lo spazio aggiunto tra ogni ripetizione
• girare ripete e allunga l'immagine senza aggiungere spazio

Questo articolo discuterà tutti i valori di proprietà di sfondo sopra menzionati con esempi.

Esempio
Cominciamo con la proprietà predefinita di immagine di fondo.

Lo snippet sopra fornirà la seguente uscita:

Quindi, per impostazione predefinita, la proprietà dell'immagine di sfondo ha ripetuto l'immagine orizzontale e verticalmente.

valore senza ripetizione

Vediamo cosa succederà quando un valore "No-REPEAT" verrà assegnato alla proprietà di ripetizione in background:

Ora l'immagine di sfondo appare solo una volta. Questo esempio fornisce il seguente output:

Valore ripetitivo

Ora assegniamo "Reped-x" alla proprietà di repetti di background e nota come funziona:

Osserviamo l'impatto di "ripetizione" sull'immagine di sfondo nella seguente uscita:

Dall'output sopra è chiaro che "Reped-x" Ripete l'immagine solo in orizzontale.

Valore ripetuta

Allo stesso modo, assegniamo il ripetizione Valore alla proprietà di REPEATTO SCHEDA:

Il pezzo di codice indicato sopra produrrà il seguente output:

L'output lo verifica ripetizione ha ripetuto l'immagine solo verticalmente.

Valore spaziale

Utilizziamo il "spazio" Valore per la proprietà di repetti di sfondo per aggiungere gli spazi pari tra le immagini:

Lo script sopra fornirà il seguente output:

valore tondo

L'assegnazione del valore "rotondo" alla proprietà di repetti di sfondo si adatterà all'immagine in base alle dimensioni dello schermo:

Di conseguenza otterremo il seguente output:

Ripetere l'immagine di sfondo multipla

In CSS è possibile aggiungere molteplici immagini di sfondo a un elemento e il seguente esempio elabora come controllare il comportamento di ripetizione di più immagini usando la proprietà di repetti di background:

Nel codice sopra, la proprietà dell'immagine di background richiede due URL per aggiungere due immagini di sfondo. Nella riga successiva la proprietà di repetti di background specifica anche due valori i.e. Ripeti-y, ripetizione-x. Repete-y ripeterà la prima immagine verticalmente mentre Repete-X ripeterà la seconda immagine in orizzontale:

Conclusione

La proprietà di REPEAT di sfondo controlla il comportamento di ripetizione dell'immagine di sfondo. Determina se un'immagine di sfondo si ripeterà o meno se sì, come, io.e. verticalmente o orizzontale.

Questo articolo ha fornito una panoramica approfondita della proprietà di repeat in background in CSS. Innanzitutto determina quali sono i valori che possono essere assegnati alla proprietà di ripetizione in background. Successivamente, ha spiegato in dettaglio il funzionamento di ciascun valore di ripetizione in background insieme agli esempi.