Immagine di sfondo in CSS
In CSS, il immagine di sfondo La proprietà viene utilizzata per impostare l'immagine di sfondo per elementi singoli o multipli. In CSS, è possibile utilizzare più proprietà per impostare l'immagine di sfondo. Alcune proprietà comunemente usate sono indicate di seguito:
- Size di sfondo La proprietà viene utilizzata per regolare le dimensioni dell'immagine di sfondo.
- Ripeat di sfondo La proprietà abilita o disabilita la ripetizione di un'immagine.
- Posizione in background Specifica la posizione di un'immagine.
Questo articolo presenterà una panoramica completa della proprietà dell'immagine di background, in cui imparerai come aggiungere un'immagine di sfondo a un singolo elemento o a tutto il corpo.
Come aggiungere una singola immagine di sfondo in CSS
La proprietà dell'immagine di fondo viene utilizzata principalmente con l'elemento corporeo, tuttavia può essere aggiunta a qualsiasi elemento specifico come paragrafi, intestazioni, div. Per aggiungere l'immagine di sfondo.
Esempio 1: Il pezzo di codice di seguito è incorporato un'immagine di sfondo su tutto il corpo:
Immagine di sfondo
Benvenuti in Linuxhint.com
Mostrerà il seguente output:
Nell'esempio sopra dato l'immagine è stata posizionata nella stessa cartella con file HTML, quindi, nel URL Prende solo il nome dell'immagine con la sua estensione come mostrato nel seguente frammento:
Ora spostiamo l'immagine in qualche altra cartella, diciamo "immagini":
Se l'immagine non è presente nella stessa directory di quanto dobbiamo specificare il percorso completo dell'immagine altrimenti non otterremmo i risultati desiderati.
Esempio 2: Invece di fornire il percorso completo, questo esempio proverà ad accedere all'immagine solo con il suo nome:
Immagine di sfondo
Benvenuti in Linuxhint.com
L'immagine è posizionata nelle immagini. Dall'output sarebbe chiaro che se non specificassi il percorso esatto non otterresti i risultati desiderati come mostrato di seguito:
Esempio 2: Consideriamo un esempio in cui l'immagine è presente nella cartella delle immagini mentre il file HTML è presente nella cartella dell'immagine di sfondo. In tal caso, specifichiamo il percorso completo dell'immagine come mostrato nel seguente frammento:
Immagine di sfondo
Benvenuti in Linuxhint.com
Nell'URL per la prima volta arrivano due punti "..." che gli stati spostano indietro di una directory, quindi vai al "immagini" Directory in cui l'immagine è posizionata e al nome dell'immagine finale arriverà con la sua estensione come JGEG, PNG, ecc. Ora questo programma genererà l'output corretto con l'immagine di sfondo come mostrato di seguito:
Allo stesso modo, l'immagine di sfondo può essere incorporata con qualsiasi elemento come
,
, eccetera.
Come aggiungere più immagini di sfondo in CSS
In CSS, è possibile aggiungere più immagini di sfondo allo stesso elemento fornendo più URL.
Esempio
Il codice di seguito è riportato aggiungerà più immagini sull'elemento corpore. come mostrato di seguito:
Immagine di sfondo
Benvenuti in Linuxhint.com
Il codice sopra utilizza
- Proprietà a colori per impostare il colore oro per il testo,
- Immagina di sfondo ha aggiunto due immagini,
- Size di sfondo Imposta le dimensioni dell'immagine su 600px,
- posizione di sfondo per allineare la posizione dell'immagine al centro,
- e infine il ripeat di sfondo prende "no-ripetizione", il che significa che ogni immagine verrà visualizzata una sola volta.
Di conseguenza genererà seguendo l'output:
Dall'output, puoi vedere chiaramente che il blu.L'immagine jpg è dietro il Linuxhint.Immagine jpeg che significa che l'URL che scrivi prima apparirà in alto mentre la seconda immagine verrà visualizzata sul retro/dietro.
Conclusione
immagine di sfondo La proprietà imposta l'immagine di sfondo per elementi singoli o multipli. Al fine di implementare un'immagine di sfondo semplicemente specificare l'URL dell'immagine nella proprietà dell'immagine di fondo.
Questo articolo ha presentato una panoramica dettagliata della proprietà dell'immagine di background. Inizialmente, spiega come aggiungere una singola immagine di sfondo in CSS. Successivamente, questa scrittura ha guidato come impostare più di una immagine di sfondo per un elemento.