CSS fornisce molteplici proprietà che aiutano a creare un sito Web affascinante e la proprietà di fondo è una delle proprietà più importanti che ci consentono di impostare lo sfondo di qualsiasi elemento, pagina Web, ecc. Individualmente, ogni proprietà svolge una funzionalità unica, tuttavia CSS fornisce alcune funzionalità per combinare più proprietà all'interno di un'unica proprietà. La combinazione di più proprietà di sfondo in una singola proprietà in background è nota come proprietà di stenografia in background.

Proprietà shorthand di fondo

È una proprietà stenografica che può assumere più valori contemporaneamente. È un metodo shorthand per le seguenti proprietà:

• Ripeat di sfondo
• immagine di sfondo
• attacco di background
• Size di sfondo
• colore di sfondo
• posizione in background
• origine background
• Background-clip

La proprietà di fondo è rappresentata da "sfondo". È possibile combinare una delle proprietà sopra menzionate nel sfondo Proprietà stenografia in base al tuo bisogno.

Sintassi

La proprietà di Shorthand di fondo segue la seguente sintassi:

Background: sfondo-sfondo-sfondo-sfondo-repeat;

Dalla sintassi sopra offerta si può osservare che il sfondo La proprietà stenografia prende più proprietà separate dallo spazio. La proprietà in background segue un ordine specifico per specificare le proprietà multiple.

Qui, prima di saltare prima sull'ordine delle proprietà di sfondo, capiremo come funzionano queste proprietà come individuo. Pertanto, considereremo alcune delle principali proprietà di fondo insieme agli esempi.

colore di sfondo

Una proprietà che determina il colore di sfondo di un elemento.

Esempio
Questo esempio imposterà il colore blu chiaro come colore di sfondo dell'elemento corporeo:

Immagine di sfondo

Benvenuti in Linuxhint.com

L'output del codice sopra sarà così:

immagine di sfondo

La proprietà dell'immagine di sfondo viene utilizzata per implementare immagini singole o più sullo sfondo di un elemento.

Esempio
Questo codice seguente aggiungerà un'immagine usando il immagine di sfondo proprietà:

Immagine di sfondo

Benvenuti in Linuxhint.com

Otterremo il seguente output:

Ripeat di sfondo

Proprietà di repeat di sfondo Abilita o disabilita la ripetizione per l'immagine di sfondo. Per impostazione predefinita l'immagine ripetuta in entrambe le direzioni i.e. orizzontale verticale. Tuttavia, utilizzando la proprietà di repetti di background possiamo impostare il reposizione in base alle nostre esigenze e.G. Ripeti-y per ripetizione verticale, ripetizione-X per ripetizione orizzontale o non ripetere per evitare la ripetizione.

Esempio
Nell'esempio precedente non abbiamo specificato la proprietà di ripetizione di sfondo, quindi l'immagine si ripete in orizzontale e verticalmente. Tuttavia, il codice di seguito utilizzato utilizza il valore senza ripetizione per disabilitare la ripetizione:

Immagine di sfondo

Benvenuti in Linuxhint.com

Ora questa volta l'immagine di sfondo apparirà solo una volta come mostrato nella seguente uscita:

posizione in background

La proprietà della posizione di sfondo determina la posizione dell'immagine di sfondo come sinistra, in alto, destra, in basso, ecc.

Esempio
L'esempio indicato di seguito imposterà l'immagine di sfondo sul centro della pagina:

Immagine di sfondo

Benvenuti in Linuxhint.com

Il codice sopra produrrà il seguente output:

Allo stesso modo, ci sono alcune altre proprietà che possono essere utilizzate per lo sfondo come:

• Attacco di sfondo Specifica che l'immagine verrà fissata per l'intera pagina o può scorrere
• La dimensione dello sfondo viene utilizzata per impostare le dimensioni dell'immagine di sfondo
• L'origina di sfondo determina l'origine dell'immagine di sfondo

Ordine di proprietà stenografia di base

Mentre lavoriamo con la proprietà di stenografia in background dobbiamo definire le proprietà in un ordine specifico come mostrato di seguito:

• Dobbiamo prima scrivere il colore di sfondo
• Quindi il secondo valore è per l'immagine di fondo
• Il terzo valore è specificato per il ripetizione in background
• L'attacco di sfondo arriva dopo il ripetizione dello sfondo
• Successivamente il valore della posizione di fondo è scritto

Possiamo saltare qualsiasi proprietà a seconda dello scenario, ma dobbiamo scrivere le altre proprietà nel corretto ordine.

Esempio
Nell'esempio precedente (posizione di sfondo) abbiamo utilizzato tre diverse proprietà. Scriviamo ogni proprietà separatamente, il che è un processo di tempo previsto. Tuttavia, queste proprietà possono essere raggruppate in una proprietà come mostrato di seguito:

Immagine di sfondo

Benvenuti in Linuxhint.com

Nel codice di cui sopra scriviamo tre proprietà: immagine di fondo, ripeti di background e posizione di fondo all'interno della proprietà di background shorthand. Mostrerà il seguente output:

Conclusione

La proprietà di Shorthand in background ci consente di impostare contemporaneamente le proprietà di sfondo multiple all'interno di una singola proprietà. Le proprietà di stenografia dello sfondo seguono un ordine specifico per impostare le proprietà multiple all'interno della proprietà in background. In questo articolo, abbiamo imparato cos'è una proprietà stentata di base, quali proprietà possono essere utilizzate all'interno del sfondo proprietà. Successivamente, questo articolo determina un ordine specifico per le proprietà.